Vue如何使用formData格式類型上傳文件

這篇文章主要講解了“Vue如何使用formData格式類型上傳文件”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Vue如何使用formData格式類型上傳文件”吧！

1.如圖片上傳，后端需要前端傳formData類型數據的情況下

<el-button type="primary"  @click="uploadFile2()">點擊上傳</el-button>
 <input type="file" @change="fileValueChange2()" ref="uploadFile2" enctype="multipart/form-data"  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:'/tMessageNotification/upload',
    method: 'POST',
    data,
    headers: {'Content-Type': 'application/json'},
  })
}

感謝各位的閱讀，以上就是“Vue如何使用formData格式類型上傳文件”的內容了，經過本文的學習后，相信大家對Vue如何使用formData格式類型上傳文件這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！