【React】上传文章封面基础实现

news2024/11/17 12:28:11
 <Form.Item label="封面">
            <Form.Item name="type">
              <Radio.Group onChange={onTypeChange}>
                <Radio value={1}>单图</Radio>
                <Radio value={3}>三图</Radio>
                <Radio value={0}>无图</Radio>
              </Radio.Group>
            </Form.Item>
            {/* 
              listType: 决定选择文件框的外观样式
              showUploadList: 控制显示上传列表
            */}
            {imageType > 0 && <Upload
              listType="picture-card"
              showUploadList
              action={'http://geek.itheima.net/v1_0/upload'}
              name='image'
              onChange={onChange}
              maxCount={imageType}
              fileList={imageList}
            >
              <div style={{ marginTop: 8 }}>
                <PlusOutlined />
              </div>
            </Upload>}
          </Form.Item>

相关属性

listType: 决定选择文件框的外观样式
在这里插入图片描述
showUploadList: 控制显示上传列表
在这里插入图片描述
onChange 上传回调,有默认形参
在这里插入图片描述

  //上传回调
  const onChange = (val)=>{
    console.log(val);
  }

默认形参,打印结果如下:
在这里插入图片描述
备注将fileList中的数据存下来,提交给后端
name上传的接口字段,由接口字段提供,接口文档中叫啥名,这里就叫啥名
在这里插入图片描述

在这里插入图片描述
action 配置上传地址
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1882866.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

用好华为小助手,生活总能快人一步

嘿&#xff01;朋友们&#xff01;你们有没有想过&#xff0c;如果身边有一个小助手&#xff0c;他不仅聪明伶俐&#xff0c;还能在生活的方方面面给予你最贴心的关怀和帮助&#xff0c;让我们的日常生活变得更加方便和快捷&#xff0c;那该有多好&#xff01;没错&#xff0c;…

openEuler AArch64 架构 vCPU 热插拔技术内幕

OpenAtom openEuler&#xff08;简称"openEuler"&#xff09;社区引领技术浪潮&#xff0c;早在openEuler 20.09 创新版本就率先使能并对外开放了 AArch64 架构 vCPU 热插特性。时隔四年&#xff0c;openEuler 24.03 LTS 版本补充了 vCPU 热拔能力&#xff0c;vCPU 热…

MySQL学习(6):SQL语句之数据控制语言:DCL

DCL用来管理数据库用户&#xff0c;控制数据库的访问权限 1.管理用户 1.1查询用户 use mysql; select * from user; #用户信息都存放在系统数据库mysql的user表中 在user表中&#xff0c;一个用户是由用户名和主机名共同决定的&#xff0c;上图中的host一栏就是用户的主机名…

Stable Diffusion用AI绘画古诗文视频副业项目,轻松涨粉10W+,项目拆解分享给你【附详细玩法教程】

项目介绍 古诗文自古以来就有着广泛的受众&#xff0c;特别是在短视频平台上&#xff0c;它不仅有很高的流量潜力&#xff0c;还能给观众带来美的享受和教育意义。通过使用AI绘画工具&#xff0c;创作者能够将古诗文中的场景生动地呈现出来&#xff0c;制作出有艺术性、有教育…

【源码+文档+调试讲解】居家养老系统

摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了居家养老系统的开发全过程。通过分析高校学生综合素质评价管理方面的不足&#xff0c;创建了一个计算机管理居家养老系统的方案。文章介绍了居家养老系统的系统分…

操作系统真象还原:进一步完善内核

第12章-进一步完善内核 12.1 Linux系统调用浅析 系统调用就是让用户进程申请操作系统的帮助&#xff0c;让操作系统帮其完成某项工作&#xff0c;也就是相当于用户进程调用了操作系统的功能&#xff0c;因此“系统调用”准确地来说应该被称为“操作系统功能调用”。 Linux 系…

用Vue3和Plotly.js打造交互式3D图

本文由ScriptEcho平台提供技术支持 项目地址&#xff1a;传送门 基于 Plotly.js 的动态图表交互&#xff1a;颜色和可见性控制 应用场景介绍 本代码旨在为数据可视化提供一个交互式图表&#xff0c;允许用户动态控制图表中线条的颜色和可见性。此功能对于探索大型数据集或突…

网络安全 文件上传漏洞-18 第十八关 Pass-18

点击进入第十八关&#xff0c;并选择显示代码&#xff1a; //index.php $is_upload false; $msg null; if (isset($_POST[submit])) {require_once("./myupload.php");$imgFileName time();$u new MyUpload($_FILES[upload_file][name], $_FILES[upload_file][tmp…

网络爬虫(一)

1. 深度优先爬虫&#xff1a;深度优先爬虫是一种以深度为优先的爬虫算法。它从一个起始点开始&#xff0c;先访问一个链接&#xff0c;然后再访问该链接下的链接&#xff0c;一直深入地访问直到无法再继续深入为止。然后回溯到上一个链接&#xff0c;再继续深入访问下一个未被访…

SAP 替代关系完全替代简介

最近用户在对长周期物料进行备料的时候又提出替代料的问题,主料库存不足的时候需要考虑替代料的在途库存,经常会忘了SAP标准的替代料逻辑,这次一次性把这个逻辑写清楚。 关于替代料的逻辑在前面的博文中测试多个替代料的使用场景 1、后继物料 2、组合替代 本文主要测试一下…

时序(流式)图谱数据仓库AbutionGraph功能介绍-Streaming Graph OLAM Database

AbutionGraph是一款端到端的流式数据实时分析的图谱数据库&#xff0c;实时&#xff08;流式写入实时、高QPS决策分析实时、流式预处理实时&#xff09;表现在&#xff1a; 构建实时查询QPS响应时长与历史数据量无关的图模型&#xff1b;接入流式数据并实时更新图计算指标&…

软考《信息系统运行管理员》-2.1信息系统运维的管理

2.1信息系统运维的管理 信息系统运维管理体系框架 信息系统运维管理主要流程的目标 标准化&#xff1a;通过流程框架&#xff0c;构件标准的运维流程流程化&#xff1a;将大部分运维工作流程化&#xff0c;确保工作可重复&#xff0c;并且这些工作都有质量的完成&#xff0c;…

设置Docker中时区不生效的问题

项目中使用docker-compose&#xff0c;并通过以下方式设置了时区 environment:- SET_CONTAINER_TIMEZONEtrue- CONTAINER_TIMEZONEAsia/Shanghai 但是并没有正确生效&#xff0c;网上有很多博客都在推荐这个做法&#xff0c;另外一种是使用标准环境标量 -TZAsia/Shangehai …

ARP 原理详解 二

只要确定了 IP 地址后&#xff0c;就能够向这个 IP 地址所在的主机发送数据报&#xff0c;这是我们所熟知的事情。 但是再往深了想&#xff0c;IP 地址只是标识网络层的地址&#xff0c;那么在网络层下方数据链路层是不是也有一个地址能够告诉对方主机自己的地址呢&#xff1f…

SAP实现特别总账的凭证预制

SAP实现特别总账的凭证预制 仔细理解只有”其他”的特殊总帐标识才可预制凭证这句话. F-29/f-48不可预制。F-29/f-48预制时出现错误消息号 FP 030&#xff0c;提示特殊总帐标志类型“汇票和”预付定金“的特别总帐标志的过帐代码不能预制&#xff0c;这是系统写死的&#xff…

[vue2/vue3] 详细剖析watch、computed、watchEffect的区别,原理解读

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;我是前端菜鸟的自我修养&#xff01;今天给大家分享【深入剖析watch、computed、watchEffect的区别】&#xff0c;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;原创不易&#xff0c;如果能帮助到带大家…

云卓SKYDROID-H30——科技改变未来

云卓H30采用高通处理器、搭载安卓嵌入式系统&#xff0c;拥有三个工作频率&#xff0c;让图像更清晰、延迟更低、距离远、抗干扰性强&#xff0c;支持多种接口&#xff0c;更有10.1寸高清工业级阳光可视屏&#xff0c;防尘耐磨&#xff0c;结构强度高&#xff0c;适用于各种严苛…

python自动化之schedule

目录 代码&#xff08;以每5秒1次为例&#xff09;: 每5分钟1次 每2小时1次 每天18:00执行 用到的库&#xff1a;schedule&#xff0c;time 实现的效果&#xff1a;按秒来运行任务&#xff0c;按分钟来运行任务&#xff0c;按小时来运行任务&#xff0c;按天来运行任务 代…

<电力行业> - 《第1课:电力行业的五大四小》

1 什么是电力行业的五大四小&#xff1f; 我们常说的电力行业的五大四小&#xff0c;指的是电力行业有实力的公司&#xff0c;分为&#xff1a;较强梯队的五大集团、较弱梯队的四小豪门。 五个实力雄厚的集团&#xff0c;分别是&#xff1a; 中国华能集团公司中国大唐集团公…

基于K线最短路径构造的非流动性因子

下载地址https://download.csdn.net/download/SuiZuoZhuLiu/89492221