Vue使用formData格式類型上傳文件的示例

Posted on by

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

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

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

到此這篇關於Vue使用formData格式類型上傳文件的文章就介紹到這瞭,更多相關Vue上傳文件內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：