在中，我們普遍是前後端分離專案，即需要使用axios等工具向後臺傳送請求實現對資料的操作。
其中，檔案上傳算是比較難的一種。這篇文章五分鐘教會你上傳檔案。

1.如圖片上傳，後端需要前端傳formData型別資料的情況下

<el-button type="primary"  @click="uploadFile2()">點選上傳</el-button>
 <input type="file" @change="fileValueChange2()" ref="uploadFile2" enctype="multipart/Vpuiblform-data" style="displ
 
ay:none;" accept="image/jpeg,image/png,image/gif">

我們使用原生input的方式來實現。

uploadFile2(){
	// 當點選button按鈕後會觸發此事件
	// 作用就是開啟檔案上傳彈框
     this.$refs.uploadFile2.click()
   },fileValueChange2(){
   // 選中檔案後，會觸發input的change事件，即會進入此函式
     var formData = new FormData()
     // this.$refs.uploadFile2是vue中獲取dom元素的方法
     // 通過files就可以拿到所有上傳的檔案，如果是多個檔案迴圈即可
     formData.append( 'file',this.$refs.uploadFile2.files[0])
     // 必須設定請求型別
     formData.append( 'type',"head");
     // 如果需要傳id的情況下，參考下面程式碼
     formData.append( 'id',this.id);
     // 配置完成後，只需要向後臺傳入formData 變數即可
     insertNavigationUpload(formData).then(res=>{
       console.log（'簡單嗎？老鐵'）
     })
   },

差點忘記一步,axios請求二次封裝我就不多說了，這裡只展示下介面

export const tMessageNotification = data =>{
  return request({
    url:'/tMessagwww.cppcns.comeNotification/upload',method: 'POST',data,headers: {'Content-Type': 'application/on'},})
}

到此這篇關於Vue使用formData格式型別上傳檔案的文章就介紹到這了,更多相關Vue上傳檔案內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！