目前公司前端使用 React 瘦材、Ant - Design
最近有個需求 ：表單除了input 暖混、 select 外還有上傳圖片的欄位禾唁，上傳圖片的部分使用了 antd 的 Upload 弹砚，踩了一些坑拙绊，在這裡紀(jì)錄一下實作方法向图。
為了馬上看到上傳的圖片而使用 照片牆 。
問題點 ：預(yù)設(shè)是點擊選擇圖片後就馬上上傳标沪，而不是選擇圖片後跟著表單所有內(nèi)容被submit 才上傳
解決辦法：beforeUpload
handleBeforeUploadFile = (file) => {
// 使用 beforeUpload 會失去在選擇圖片後馬上看到圖片的功能榄攀，因此利用FileReader方法來實現(xiàn)預(yù)覽效果
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = function () {
this.setState({fileList: [{uid: file.uid, url: reader.result}],image:reader.result})
}.bind(this);
// 使用 beforeUpload 回傳 false 可以停止上傳
return false
}
需要使用multipart/form-data
為了可以送出 file (圖片）使用 multipart/form-data，因為使用 antd 不在 Form 標(biāo)籤加 enctype="multipart/form-data", 之前也曾設(shè)定 Content-Type 金句，但是行不通航攒。
解決辦法還是 new formData()，在調(diào)用 api 時傳入 formData 趴梢。
* 注意* 不可以 JSON.stringify(formData) , 要直接傳formData
let formData = new FormData();
// fields 是表單內(nèi)容，將它 append 到 formData
Object.keys(fields).map((item) => {
formData.append(item,fields[item])
})
還有其他在 form 卡住的關(guān)卡币他，筆記後補(bǔ)...
