【Vue】vue+axios+FormData上傳多個文件

html

一般網頁上傳文件大家都會用到這個標簽

<input type="file" id="file_input"/>

我們可以通過這個標簽選取文件，使用js進行文件上傳等操作，同時，該標簽同時可以選取多個文件：

<input id="upload_file" type="file" multiple @change="v_upload_files"/>

但有些時候，進行其他操作的時候，用戶需要獲得文件夾路徑，那么這種寫法可以用該標簽選取文件夾

<input type="file" id="file_input" webkitdirectory directory />

使用ant-design的upload組件時獲得文件夾路徑的方式：

<a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" directory>
    <a-button> <a-icon type="upload" /> Upload Directory </a-button>
</a-upload>

 注意input file 是不支持v-model的，因為v-model是雙向數據綁定，而input file里面的文件只能通過點擊選取來進行變更。

js

v_upload_files(e) {
  let files = e.target.files
  let formData = new FormData()
  // formData重復的往一個值添加數據並不會被覆蓋掉，可以全部接收到，可以通過formData.getAll('files')來查看所有插入的數據
  for (let i = 0;i < files.length;i++) {
    formData.append('files', files[i])
  }
  let url = '/files/uploadfiles'
  let headers = {
    'Content-Type': 'multipart/form-data'
  }
  axios.post(url, formData, {headers: headers})
}

需要注意的是請求頭需要設置為'Content-Type': 'multipart/form-data'

參照：https://juejin.cn/post/6844903934469865485

參照：https://blog.csdn.net/shi_6_tians/article/details/103750752