使用axios+formdata+vue上傳圖片遇到後台接受不到圖片的值的問題

標籤：情況下   指定   art   body   全域   cto   element   orm   文字資訊   

先直接貼代碼

html代碼如下：

<input type="file"@change="getFileExpr($event)"><el-form id="uploadForm" :rules="rules2" method="post" enctype="multipart/form-data">

這個地方我是使用的element ui架構中的form組件 原生的html的form標籤也可以，主要添加 id 和指定

method="post" enctype="multipart/form-data"

//onchange 方法 拿到檔案名稱和檔案
getFileExpr(event){
  this.fileName = event.target.files[0].name;
  this.file = event.target.files[0];
},

//關於formdata使用方式請自行搜尋
let uploadForm=document.getElementById("uploadForm");let formData = new FormData(uploadForm); 
formData.append(‘img‘, this.file);

this.$http.post(‘url‘,formData) .then(response => { 
})

 

 通常來說這樣就可以了 這個地方的this.$http 是axios全域配置然後匯入到vue的prototype 問題出於在全域配置的時候因為post請求是formdata格式的，所以要引入qs這個模組用于格式化data資料，但是如果你是使用上傳的話就不要用qs來格式化這個資料了，否則的話後台是接收不到資料的，所以這個判斷應該在加一個條件

 //config.data.constructor !== FormData 不等於formdata的情況下 qs資料

if(config.method  === ‘post‘ && config.data.constructor !== FormData){      config.data = qs.stringify(config.data);  }

以上就是原因，初識axios的時候需要配置很多東西不像以往的基於jq的ajax，比如需要預設情況下axios請求是json格式而後端需要formdata格式就需要引入qs模組，比如上傳圖片還要再次加判斷這樣，遇到這種問題，先看後端報什麼錯誤，如果後端沒問題，那麼就去找文檔、去搜尋、先把錯誤規模逐漸層窄、比如這個問題，最先開始是後端接收不到我上傳的圖片，只能接收到文字資訊，先從fromdata這種查，因為也是第一次用formdata，然後對照網上的案例沒有問題，再使用jq的ajax請求，卻可以請求得到，說明問題還是出在aixos上，對於新手而言把錯誤規模逐漸層窄 我認為這是個很好的思想

使用axios+formdata+vue上傳圖片遇到後台接受不到圖片的值的問題