1. 程式人生 > 其它 >VUE 向後臺傳遞 file陣列檔案, 後臺接收不到

VUE 向後臺傳遞 file陣列檔案, 後臺接收不到

當vue通過post請求向後臺同時傳遞多個file檔案和陣列時,應採用Formdata物件進行迴圈append檔案,切記不可以append file陣列,不然後臺會收不到檔案物件,而普通陣列可以通過append陣列的形式進行新增,後臺是可以接收到的。

通過vue做檔案上傳的時候,定義了 :file-list = " imgList"

 // 上傳檔案列表
      imgList: [],

通過繫結 upload 的 onchange 事件可以 獲取 需要上傳的檔案物件。

// 上傳onchange事件
    choiceFile(file, fileList) {this.imgList.push(file.raw); //file.raw 就是檔案物件
    },

注意: 在請求的時候不能直接 append 新增 imgList ,後臺在接收的時候會接收不到,需要Formdata物件進行迴圈append檔案。

    uploadSectionFile() {
    //判斷檔案大小是否超過2M
this.field101BeforeUpload(); // 根據後臺需求資料格式 const form = new FormData(); // 檔案物件 for (const item of this.imgList) { form.append("file", item); }
// 專案封裝的請求方法,下面做簡單介紹 imgUpload(form).then((response) => { const code = response && parseInt(response.code, 10); if (code === 200) { // xxx } else { // xxx } }); },