1. 效果展示
官網(wǎng)給出的案例無法使用封裝好的請求方式上傳圖片，以及無法滿足上傳圖片后獲取接口url、名稱等信息的的業(yè)務(wù)需求。這個時候需要用到customRequest這個api。
但是很遺憾，官網(wǎng)沒有給出具體案例。
不過——博主自己試出來了<(￣︶￣)>
2. customRequest如何使用？
要使用upload，特別重要的屬性就是fileList文件列表，我們通過控制fileList的內(nèi)容來顯示清空圖片列表。
const props = {
const { fileList } = this.state
onPreview: () => {
// 這里一般寫調(diào)取預(yù)覽彈窗，點圖片上的小眼睛后觸發(fā)
}，
onRemove: ()=> {
// 這里清除，我們一般給fileList空數(shù)組實現(xiàn)清除效果
this.setState({fileList: []})
},
customRequest: val => {
// 這里可以調(diào)用您自定義封裝的請求...
// 這一步十分重要！?。Q定你的圖片是否正常使用該組件的預(yù)覽功能?。?！
val.file.status = 'done';
val.file.url = '這里填寫從接口獲取到上傳到服務(wù)器的鏈接'
// 執(zhí)行這句后，圖片列表可以看到有圖片了
this.setState({fileList: [val.fileList]})
},
fileList // upload 必不可少的屬性
}
return (
<Upload {...props }></Upload>
)
特別注意：
fileList 數(shù)組中每一個對象的url必須存在，才能觸發(fā)圖片預(yù)覽時間，不然眼睛是灰色的無法點擊的
文章來源：http://www.zghlxwxcb.cn/news/detail-581186.html
3. 控制上傳時什么時候使用customRequest，什么時候選擇beforeUpload方法？
需要額外的事件才觸發(fā)圖片上傳到服務(wù)器上使用beforeUpload，反之customRequest文章來源地址http://www.zghlxwxcb.cn/news/detail-581186.html
到了這里，關(guān)于【react + antd】antd如何自定義請求使用antd的upload組件實現(xiàn)圖片上傳且可預(yù)覽可刪除的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
