antd 圖片上傳遇到的坑----圖片回顯（Upload）

最近又被安排了一個(gè)前端的項(xiàng)目，遇到了一個(gè)圖片上傳的問題，用的是antd的Upload組件，在這遇到的問題和大家分享一下，下網(wǎng)可以幫到需要的人。（antd官網(wǎng)）

1.圖片回顯

這是本次最大的坑。在這里說兩種回顯問題；

1.頁面之前保存的圖片回顯

我們獲取圖片的地址是根據(jù)id來的，發(fā)送的圖片的請(qǐng)求后面沒有.png等圖片標(biāo)識(shí)的后綴(如：http://****/?Id=1111111111111111),upload組件不會(huì)發(fā)送請(qǐng)求獲取圖片信息，解決方式配置圖片時(shí)加type屬性。

fileList={fileList}獲取圖片信息后放入組件fileList中的數(shù)據(jù)格式：

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

2.剛剛上傳的圖片回顯

上傳圖片后圖片的status屬性一直是uploading狀態(tài)，圖片上傳成功，卻一直是進(jìn)度條狀態(tài)。
解決方法是在 onCancel={this.handleCancel}回調(diào)方法開頭加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.其他官網(wǎng)未顯示可用配置

可配置 onSuccess={e => onSuccess(e)}獲取請(qǐng)求返回結(jié)果

3.最后附上完整組件代碼

<Uploadaction={baseUrl + "/app/photo/upload"} //這個(gè)是圖片上傳的接口請(qǐng)求，實(shí)際開發(fā)中，要替換成你自己的業(yè)務(wù)接口data={file => ({// data里存放的是接口的請(qǐng)求參數(shù)activityId: props.location.propsId,userCode: '*******',})}listType="picture-card"fileList={fileList} //默認(rèn)的圖片顯示multiple={true}// customRequest={customRequest}onChange={e => handleChange(e)} // 每次上傳圖片時(shí)，都會(huì)觸發(fā)這個(gè)方法onPreview={e => handlePreview(e)} // 點(diǎn)擊圖片縮略圖，進(jìn)行預(yù)覽showUploadList={{showRemoveIcon: false // 不顯示圖片刪除標(biāo)識(shí)的配置}}onSuccess={e => onSuccess(e)} //接口請(qǐng)求后的回調(diào)，可以獲取請(qǐng)求結(jié)果 我這里沒用到>{uploadButton} </Upload>

總結(jié)

以上是生活随笔為你收集整理的antd 图片上传遇到的坑----图片回显（Upload）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。