【土旦】 使用Vant 的Uploader 上傳圖片 重定義返回格式 使用FormData格式提交

前言

---

 

開發一個圖片上傳功能 需求要用vant中的Uploader ，

發現 Uploader組件官方封裝返回的數據是加密的，不適合我這個項目（需要上傳到本地ftp服務器），

看了一下官方 issue 發現有人提問 官方有回復 加密數據轉 formdata格式的操作，

復制過來發現不行，又搜索了一下度娘，終於解決問題，現在把坑記錄一下

官方提供的格式轉化（沒起效。。。）

const formData = new FormData();
formData.append('file', file);

這是我項目里面實現的代碼：axios（需要設置請求頭）

---

 

　　html代碼

<div class="posting_uploader">
      <div class="posting_uploader_item" v-for="(item,index) in posting_data.pathList" :key="index">
        <img :src="item" alt>
        <van-icon name="close" @click="del_img(index)"/>
      </div>
      <van-uploader :after-read="onRead" :accept="'image/*'" v-show="posting_data.pathList.length<6">
        <img src="./icon_addpic.png" alt class>
      </van-uploader>
    </div>

　　

---

 

js 代碼

// 上傳圖片
async onRead(file) {
    let formData = new window.FormData();
    formData.append('file', file.file);
    try {
        let res = await util.ajax.post(Url, formData, {
            headers: {
                "Content-Type": "multipart/form-data"
            }
        });
        console.log(res);
        if (XXX) {
           XXX
        } else {
           XXX
        }
    } catch (e) {
        console.log(e);
        this.$toast(`網絡連接錯誤, 請稍后再試!`)
    }
},

---

 

 實現效果

---

 

記錄走過的路，踩過的坑，互勉。

　　前端交流群：87709616

有不同意見的可以留言，我們一起討論。