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

 <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 && <UploadlistType="picture-card"showUploadListaction={'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 配置上传地址
在这里插入图片描述
在这里插入图片描述
对封面类型与图片数量的校验

目的:如果封面类型选的是三图,而只上传了一张图片,则不能发布文章,上传图片数量必须与选择的封面类型要求的图片数量一致

// 提交表单const onFinish = (formValue) => {console.log(formValue)// 校验封面类型imageType是否和实际的图片列表imageList数量是相等的if (imageList.length !== imageType) return message.warning('封面类型和图片数量不匹配')const { title, content, channel_id } = formValue// 1. 按照接口文档的格式处理收集到的表单数据const reqData = {title,content,cover: {type: imageType, // 封面模式// 这里的url处理逻辑只是在新增时候的逻辑// 编辑的时候需要做处理images: imageList.map(item => {if (item.response) {return item.response.data.url} else {return item.url}}) // 图片列表},channel_id}

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

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

相关文章

react 自定义 年-月-日 组件,单独选择年、月、日,并且产生联动

自定义 年-月-日 组件 code import { useState } from react function Year_Month_Date() {const [yearList, setYearList] useState([])const [monthList, setMonthList] useState([])const [dateList, setDateList] useState([])const [currentYear, setCurrentYear] u…

javaweb(四)——过滤器与监听器

文章目录 过滤器Filter基本概念滤波器的分类: 时域和频域表示滤波器类型1. 低通滤波器(Low-Pass Filter)2. 高通滤波器(High-Pass Filter)3. 带通滤波器(Band-Pass Filter)4. 带阻滤波器(Band-Stop Filter) 滤波器参数1. 通带频率(Passband Frequency)2. 截止频率(Cutoff Frequ…

【Kotlin】Kotlin 基础语法指南

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…

vue3 elementplus Springboot 课程购买系统案例源码

系统演示 项目获取地址 Springboot vue3 elementplus 课程购买系统案例源码 附带系统演示&#xff0c;环境搭建教程,开发工具 技术栈:SpringBoot Vue3 ElementPlus MybatisPlus 开发工具:idea 后端构建工具:Maven 前端构建工具:vite 运行环境:Windows Jdk版本:1.8 Nod…

基于Tools体验NLP编程的魅力

大模型能理解自然语言&#xff0c;从而能解决问题&#xff0c;但是就像人类大脑一样&#xff0c;大脑只能发送指令&#xff0c;实际行动得靠四肢&#xff0c;所以LangChain4j提供的Tools机制就是大模型的四肢。 大模型的不足 大模型在解决问题时&#xff0c;是基于互联网上很…

Tomcat部署与优化

Tomcat部署与优化 Tomcat简述 server&#xff1a; 服务器&#xff0c;Tomcat运行的进程实例&#xff0c;一个Server中可以有多个service&#xff0c;但通常就一个 service&#xff1a;服务&#xff0c;用来组织Engine&#xff08;引擎&#xff09;和Connector&#xff08;连接…

gdb及其使用

gdb调试一&#xff1a; 首先进入gdb&#xff0c;确定好进程&#xff0c;输入进程号 确定要调试哪个文件&#xff0c;然后输入&#xff1a;&#xff08;b为打断点&#xff09; (gdb) b serialization_protobuffer.h:write<ros::serialization::OStream>(ros::serializat…

MySQL的limit关键字和聚合函数讲解

目录 一、MySQL数据库介绍二、MySQL聚合函数三、MySQL数据排序分组四、MySQL的limit关键字 一、MySQL数据库介绍 MySQL是一种广泛使用的开源关系型数据库管理系统&#xff0c;由瑞典MySQL AB公司开发&#xff0c;后被Sun Microsystems收购&#xff0c;最终成为Oracle公司的一部…

RANSAC空间圆拟合实现

由初中的几何知识我们可以知道&#xff0c;确定一个三角形至少需要三个不共线的点&#xff0c;因此确定一个三角形的外接圆至少可用三个点。我们不妨假设三个点坐标为P1(x1,y1,z1),P2(x2,y2,z2),P3(x3,y3,z3)。 圆方程的标准形式为&#xff1a; (xi-x)2(yi-y)2R2 &#xff08;1…

新火种AI|苹果要将苹果智能做成AI时代的APP Store?

作者&#xff1a;一号 编辑&#xff1a;美美 苹果还是想要自己做AI时代的“APP Store”。 自从去年开始落了队&#xff0c;苹果现在AI上开始高歌猛进。今年WWDC上展示的AI产品和与OpenAI的合作只是开始。有消息称&#xff0c;苹果正与Meta等AI巨头展开深入合作&#xff0c;这…

Spring底层原理之bean的加载方式四 @import 注解

bean的加载方式四 import 第四种bean的导入方式 是import导入的方式 在配置类上面加上注解就行 package com.bigdata1421.config;import com.bigdata1421.bean.Dog; import org.springframework.context.annotation.Import;Import(Dog.class) public class SpringConfig4 {…

CesiumJS【Basic】- #041 绘制纹理线(Entity方式)- 需要自定义着色器

文章目录 绘制纹理线(Entity方式)- 需要自定义着色器1 目标2 代码2.1 main.ts3 资源文件绘制纹理线(Entity方式)- 需要自定义着色器 1 目标 使用Entity方式绘制纹理线 2 代码 2.1 main.ts import * as Cesium from cesium;const viewer = new Cesium.Viewer

K8S学习教程(一):使用PetaExpress云服务器安装Minikube 集群题

什么是Minikube Minikube是一款工具&#xff0c;主要用于在本地运行 Kubernetes 集群。Kubernetes 开源的平台&#xff0c;用于自动化容器化应用的部署、扩展和管理&#xff0c;而Minikube 使得开发人员能够在本地机器上轻松创建一个单节点的 Kubernetes 集群&#xff0c;从而…

如何使用AI学习一门编程语言?

无论你是软件开发新手还是拥有几十年的丰富经验&#xff0c;总是需要学习新知识。TIOBE Index追踪50种最受欢迎的编程语言&#xff0c;许多生态系统为职业发展和横向转型提供了机会。鉴于现有技术具有的广度&#xff0c;抽空学习一项新技能并有效运用技能可能困难重重。 最近我…

ARCGIS python 裁剪栅格函数 arcpy.management.Clip

ARCGIS python 裁剪栅格函数 arcpy.management.Clip 1 功能 裁剪掉栅格数据集、镶嵌数据集或图像服务图层的一部分。 2 使用情况 基于模板范围提取部分栅格数据集&#xff0c;输出与模板范围相交的所有像素使用以 x 和 y 坐标的最小值和最大值确定的包络矩形或使用输出范围文…

MATLAB-振动问题:单自由度阻尼振动系统受迫振动

一、基本理论 二、MATLAB实现 单自由度阻尼振动系统受迫振动&#xff0c;MATLAB代码如下&#xff1a; clear; clc; close allA 1; psi 0; F0 10; D 20; Rm 0.5; M 1; omega 2; delta Rm / (2*M); omega0 sqrt(D / M); Omega sqrt(omega0^2 - delta^2); Zm Rm i *…

LLM大模型工程师面试经验宝典--基础版(2024.7月最新)

1.简单介绍一下大模型【LLMs】&#xff1f; 大模型&#xff1a;一般指1亿以上参数的模型&#xff0c;但是这个标准一直在升级&#xff0c;目前万亿参数以上的模型也有了。大语言模型&#xff08;Large Language Model&#xff0c;LLM&#xff09;是针对语言的大模型。 2.目前主…

基于布雷格曼偏差校正技术的全变分一维时间序列信号降噪方法(MATLAB R2018A)

信号降噪是信号处理的重要步骤之一&#xff0c;目的是提高所获得信号数据的质量&#xff0c;以达到更高的定性和定量分析精度。信号降噪能提升信号处理其他环节的性能和人们对信息识别的准确率&#xff0c;给信号处理工作提供更可靠的保证。信号降噪的难点是降低噪声的同时也会…

69. x 的平方根(简单)

69. x 的平方根 1. 题目描述2.详细题解3.代码实现3.1 Python方法一&#xff1a;逐个遍历方法二&#xff1a;二分查找 3.2 Java 1. 题目描述 题目中转&#xff1a;69. x 的平方根 2.详细题解 不能使用系统内置的函数&#xff0c;寻找某个数&#xff08;假定为x&#xff09;的…

网络请求的高效处理:C++ libmicrohttpd库详解

一、libmicrohttpd简介 libmicrohttpd是一个小型的C语言库&#xff0c;用于创建HTTP服务器和客户端。它提供了HTTP 1.1协议的完整实现&#xff0c;包括持久连接、管道化请求、虚拟主机等特性。libmicrohttpd的特点是&#xff1a; 轻量级&#xff1a;易于集成到C或C项目中。跨…