antd 图片上传遇到的坑----图片回显（Upload）

最近又被安排了一个前端的项目，遇到了一个图片上传的问题，用的是antd的Upload组件，在这遇到的问题和大家分享一下，下网可以帮到需要的人。（antd官网）

1.图片回显

这是本次最大的坑。在这里说两种回显问题；

1.页面之前保存的图片回显

我们获取图片的地址是根据id来的，发送的图片的请求后面没有.png等图片标识的后缀(如：http://****/?Id=1111111111111111),upload组件不会发送请求获取图片信息，解决方式配置图片时加type属性。

fileList={fileList}获取图片信息后放入组件fileList中的数据格式：

const photo = res.data.map(map => {return {uid: map.id,status: 'done',type: 'image/png',url: http://*******/***?Id=1111111111111111}});setFileList(photo)

2.刚刚上传的图片回显

上传图片后图片的status属性一直是uploading状态，图片上传成功，却一直是进度条状态。
解决方法是在 onCancel={this.handleCancel}回调方法开头加setFileList([…data.fileList]);
我这边只有加在方法开始生效

const handleChange = (data) => {setFileList([...data.fileList]);//新增图片或视频 将uid置换为上传成功返回的idif (data.file.response) {if (data.file.response.success) {data.fileList[data.fileList.length - 1].uid = data.file.response.data.id;}}}

2.其他官网未显示可用配置

可配置 onSuccess={e => onSuccess(e)}获取请求返回结果

3.最后附上完整组件代码

<Uploadaction={baseUrl + "/app/photo/upload"} //这个是图片上传的接口请求，实际开发中，要替换成你自己的业务接口data={file => ({// data里存放的是接口的请求参数activityId: props.location.propsId,userCode: '*******',})}listType="picture-card"fileList={fileList} //默认的图片显示multiple={true}// customRequest={customRequest}onChange={e => handleChange(e)} // 每次上传图片时，都会触发这个方法onPreview={e => handlePreview(e)} // 点击图片缩略图，进行预览showUploadList={{showRemoveIcon: false // 不显示图片删除标识的配置}}onSuccess={e => onSuccess(e)} //接口请求后的回调，可以获取请求结果 我这里没用到>{uploadButton} </Upload>

总结

以上是生活随笔为你收集整理的antd 图片上传遇到的坑----图片回显（Upload）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。