【土旦】 使用Vant 的Uploader 上傳圖片 重定義返回格式 使用FormData格式提交
阿新 • • 發佈:2018-12-24
背景
開發一個圖片上傳功能 需求要用vant中的Uploader ,
發現 Uploader元件官方封裝返回的資料是加密的,不適合我這個專案(需要上傳到本地ftp伺服器),
看了一下官方 issue 發現有人提問 官方有回覆 加密資料轉 formdata格式的操作,
複製過來發現不行,又搜尋了一下度娘,終於解決問題,現在把坑記錄一下
官方提供的格式轉化(沒起效。。。)
1 const formData = new FormData(); 2 formData.append('file', file);
這是我專案裡面實現的程式碼:axios(需要設定請求頭)
html程式碼
1 <div class="posting_uploader"> 2 <div class="posting_uploader_item" v-for="(item,index) in posting_data.pathList" :key="index"> 3 <img :src="item" alt> 4 <van-icon name="close" @click="del_img(index)"/> 5 </div> 6 <van-uploader :after-read="onRead" :accept="'image/*'" v-show="posting_data.pathList.length<6"> 7<img src="./icon_addpic.png" alt class> 8 </van-uploader> 9 </div>
js 程式碼
1 // 上傳圖片 2 async onRead(file) { 3 let formData = new window.FormData(); 4 formData.append('file', file.file); 5 try { 6 let res = await util.ajax.post(Url, formData, {7 headers: { 8 "Content-Type": "multipart/form-data" 9 } 10 }); 11 console.log(res); 12 if (XXX) { 13 XXX 14 } else { 15 XXX 16 } 17 } catch (e) { 18 console.log(e); 19 this.$toast(`網路連線錯誤, 請稍後再試!`) 20 } 21 },
實現效果