vue+axios+FormData上傳多個文件

html

<input id="upload_file" type="file" multiple @change="v_upload_files"/>
複製代碼

注意input file 是不支持v-model的，由於v-model是雙向數據綁定，而input file裏面的文件只能經過點擊選取來進行變動。因此這裏只能用@change事件來觸發上傳

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'

後臺python

files = self.request.files.get('files', None)
  if files is not None:
      for item in files:
          # 設定一個存儲路徑來保存上傳的文件
          file_path = os.path.join('static', 'download_file', uid)
          # 判斷這個路徑是否存在，若是不存在則建立該路徑
          if (os.path.exists(file_path) is not True):
              os.makedirs(file_path)
          # 拼接文件名，獲得文件的路徑
          file_path = os.path.join(file_path, item.filename)
          # 將文件寫入到目標路徑
          with open(file_path, 'wb+') as f:
              f.write(item.body)
複製代碼