antd Upload组件使用，出现闪动问题

1、upload使用简介

1.1 在真实的项目中使用的时候，需要有个中转地址，upload里的action里的地址，是存放图片的地址，不是后台直接把数据存到库里的添加删除的地址（重要）。

upload里的action里的地址，是存放图片的地址。正确的顺序是：
调用查询接口获取数据-----展示数据------点击上传按钮，选择图片，上传到中转地址------中转地址，返回结果，以及图片的id name 等信息 ---- 点击图片上的删除按钮-----从中转地址删除此图片 -------点击确定，将图片的信息（从中转地址得到的）发送给更新接口

这里一共3个接口：查询的、中转存储的（支持删除和添加）、更新图片的。

upload部分代码

 <Uploadaction="http://61.50.111.214:28282/publish-system/humanActivity/xxxxx"name="files"listType="picture-card"multiplefileList={fileList}showUploadList={{showRemoveIcon:(props.timeType === 2 && props.task_state === 5) ||(props.timeType === 1 && props.task_state !== 2)? false: true,}}accept="image/*"maxCount={max_img_count}onChange={(info) => {handelFile(info);// setFileList(info.fileList);}}onPreview={handlePreview}>{(props.timeType === 2 && props.task_state === 5) ||(props.timeType === 1 && props.task_state !== 2)? null: uploadButton}</Upload>

和中转存储接口的，交互函数

 //info.file.status： uploading --- done   error  ---- delefunction handelFile(info) {if (info.file.status !== 'done') {setFileList(info.fileList);}if (info.file.status === 'error') {message.error(info.file.name + '文件上传失败');}if (info.file.status === 'done') {let imgs = info.fileList.map((value) => {let img;// 1、处理上传成功的数据if (value.response && value.response.data) {// 2、改成下面这种写法能解决闪动问题。//由于后续点击确定，调用接口塞数据的时候，需要每个图片的 在上传地址的 id。所以这里拼个id进去。保留原始返回的数据img = {...value,id: value.response.data[0].id,url: imgBaseUrl + value.response.data[0].url, //如果不加这个会，导致有时候无法预览（dog）};// 这种写法,直接将info.fileList的数据捞出来，只截取需要的简洁数据，会造成图片列表闪动的问题，应该是缺什么字段，导致的// img = {//   id: value.response.data[0].id,//    uid: value.response.data[0].id,//   name: value.response.data[0].name,//    status: 'done',//     url: imgBaseUrl + value.response.data[0].url,//    // url: value.response.data[0].url,// };} else {// 3、如果是之前处理过的数据、或者上传失败的数据，则没有value.response、value.response.data,直接塞进去就行img = value;}return img;});console.log(imgs);setFileList(imgs);}}

将所有图片信息，更新到数据库的方法

 // 点击确定function onOk() {let resourceIds = [];console.log(fileList);fileList.forEach((element) => {if (element.status === 'done') resourceIds.push(element.id);});
//这是调用 接口3  更新接口的appendPics({ questionId: props.id, resourceIds }, (res) => {if (res.code === 200) {message.success('保存成功！');hideModal();} else {message.error('保存失败，请稍后再试');}});}

1.2 为啥会闪动

由于handelFile(info);里的数据，并不是规范的传递给更新接口的数据，所以我写了下面的代码，来过滤出我需要 filelist 的属性

 function handelFile(info) {if (info.file.status !== 'done') {setFileList(info.fileList);}if (info.file.status === 'error') {message.error(info.file.name + '文件上传失败');}if (info.file.status === 'done') {let imgs = info.fileList.map((value) => {let img;// 1、处理上传成功的数据if (value.response && value.response.data) {// (!!!!看这里，错误写法！！！！)这种写法,直接将info.fileList的数据捞出来，只截取需要的简洁数据，会造成图片列表闪动的问题，应该是缺什么字段，导致的img = {id: value.response.data[0].id,uid: value.response.data[0].id,name: value.response.data[0].name,status: 'done',url: imgBaseUrl + value.response.data[0].url,};//  (!!!!看这里，正确写法！！！！)2、改成下面这种写法能解决闪动问题。// //由于后续点击确定，调用接口塞数据的时候，需要每个图片的 在上传地址的 id。所以这里拼个id进去。保留原始返回的数据// img = { ...value, id: value.response.data[0].id }; } else {// 3、如果是之前处理过的数据、或者上传失败的数据，则没有value.response、value.response.data,直接塞进去就行img = value;}return img;});console.log(imgs);setFileList(imgs);}}

1.3在网上看，还有个解决方法。挺离谱的，直接改样式，

 :global {.ant-upload-list-picture-card {padding-bottom: 0.2rem;// 解决图片多出来闪动的问题.ant-upload-animate-inline-leave.ant-upload-animate-inline-leave-active {// display: none !important;width: 0 !important;height: 0 !important;margin-right: 0.15rem !important;margin-bottom: 0.15rem !important;}}

这个还是会有问题，会造成，图片的间距没了，上传好才排版正常，总之，直接改样式是最蠢的行为

总结：如果你需要对handelFile(info)里的数据进行处理，不能直接捞出来，可以选择添加属性的方式，否则会出现闪动问题。可能是某个upload组件的必要字段在捞出来的时候被漏掉了。

antd Upload组件使用，出现闪动问题相关推荐

antd Upload组件上传状态一直处于uploading
antd Upload组件上传状态一直处于uploading 对于受控模式,需要在 onChange 中始终 setState fileList,保证所有状态同步到 Upload 内 import { ...
antd pro项目中 antd Upload组件基于 lrz 在上传前做图片压缩
lrz npm和参数文档可供参考 import { Upload,Button} from 'antd'; import lrz from 'lrz';//处理函数 function compress ...
antd upload取消图片删除按钮
** <UploadshowUploadList={{showRemoveIcon:false}}//加上这句代码onChange={this.uploadStateChange}beforeU ...
Antd Upload 文件上传，自定义上传错误信息
项目需求使用antd Upload 组件项目上要求前端对上传不符合标准的图片展示具体的错误信息不设置action,即返回信息无response ,先在前端上传后调用接口保存效果截图主要是根据 ...
antd vue upload组件上传视频并实现视频预览
antd vue upload组件上传视频并实现视频预览 html代码 <form><a-form-itemlabel="商品视频":labelCol=" ...
对于 React 结合 Antd 的 Upload 组件实现图片上传
一. React 结合 Antd 实现图片上传引入所需相关的组件和文件,代码如下所示: import React, { Component } from 'react' import PropTyp ...
antd 上传进度_antd vue upload组件使用customRequest上传文件显示文件上传进度
antd-vue上传文件upload组件使用自定义上传方法customRequest无法显示文件上传进度条,如下图红框内的进度条无法显示当前文件上传进度于是,在网上搜索解决方案: 第一种解决方案是自 ...
ant design 预览图片_AntD框架的upload组件上传图片时遇到的一些坑
前言本次做后台管理系统,采用的是 AntD 框架.涉及到图片的上传,用的是AntD的 upload 组件. 前端做文件上传这个功能,是很有技术难度的.既然框架给我们提供好了,那就直接用呗.结果用的时 ...
Antd Upload 和 Antd Form 结合的踩坑记录
今天弄了半天这个上传组件结合表单组件的问题. 这个上传文件列表,如果是当前正在修改或者上传成功,当然是可以正常工作的,但是想要增加一个功能: 下次打开 Modal 时,表单字段中的上传文件字段,可以默 ...