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）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。