1. 程式人生 > 其它 >vue實現檔案的上傳

vue實現檔案的上傳

vue 檔案上傳相關程式碼(我們使用elementui 外掛來實現):

1.前端程式碼 <el-upload   class="upload-demo"   ref="upload"   drag   :multiple =false   action="/api/job/littleVersionUpload"   :auto-upload="false"   :file-list= selectedFiles   :on-remove="removeFile"   :on-change="changeFileState" >   <i class="el-icon-upload"></i>   <div class="el-upload__text">將檔案拖到此處,或<em>點選此處</em>選中</div>   <el-button size="small" type="success" @click.stop="submitUpload">上傳到伺服器</el-button> </el-upload> 實現檔案上傳的是我們宣告的submitUpload方法, 如果我們在submitUpload方法中使用this.$refs.upload.submit(),檔案就會被提交到aciton所指定的位置, 但是如果我們不想在這裡吧路徑寫死,想自己寫檔案提交介面的話,就可以按照如下方式進行提交: 在自定義介面中,   上傳的檔案fileData,要進行如下處理:   我們將其他需要傳遞的引數,通過param新增,或者通過config防止在請求頭中也可以。      let param = new FormData()   param.append('file',fileData)      //這裡append中的file,是給檔案,起的名字,後端通過該名字獲取指定檔案
  let config={     headers:     {       'Content-Type': 'multipart/form-data',       'fileName':fileName     //這裡吧檔名引數放在請求頭中,用於後端獲取檔名之後,將檔案儲存成同一個檔名。     }   }   return axiosObj.post(     '/apifileUpload',     param,     config   ) 注意事項:    這裡的檔案在傳送post請求中,資料型別必須是binary,如果不是的話,那就是封裝的資料有誤,最常見的就是Object型別(這裡是個大坑,被阻塞了好久)    2.flask後端接受檔案   fileName = request.headers.get('fileName')  #獲取檔名   data = request.file('file')    #獲取檔案資料   data.save("檔案要儲存的路徑"+fileName)  #將檔案儲存到指定目錄下。      這個過程的執行時間與檔案大小成正比。