antd 图片上传遇到的坑----图片回显(Upload)
生活随笔
收集整理的這篇文章主要介紹了
antd 图片上传遇到的坑----图片回显(Upload)
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
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ù)格式:
2.剛剛上傳的圖片回顯
上傳圖片后圖片的status屬性一直是uploading狀態(tài),圖片上傳成功,卻一直是進(jìn)度條狀態(tài)。
解決方法是在 onCancel={this.handleCancel}回調(diào)方法開頭加setFileList([…data.fileList]);
我這邊只有加在方法開始生效
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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 基于树莓派的追光系统(python)
- 下一篇: 实战:开直通车别再走进这5个误区