vue-resource+element upload上傳（遇到formData老是變爲object格式）

 

 

文件上傳這種業務需求很常見，可是最近用了element，仔細看了文檔，按照demo寫了上傳，與後臺傳參調取接口時，控制檯老是顯示未獲取到文件，想了又想，發現一開始思路就跑遍了。。。

寫此博記錄下遇到的問題。

傳參給後臺須要formdata格式的，這種格式也很常見，以下：

// FormData 對象

var form = new FormData();

// 文件對象

form.append("file", fileObj);

// 其餘參數

form.append("xxx", xxx);

可是有一點，我發現我怎麼傳，控制檯始終都是這樣,以下截圖：（估計大家都比我聰明。。此處想打本身一下！！

 

）

 

 

而後找了半天沒發現爲何，後來發現element裏的上傳是組件裏已經定義好的，不用再去寫post請求，formData格式也不用定義。。。

 

 官網文檔寫得很詳細，action就是post請求的路徑，字符串格式，headers是頭部，data爲其餘附加參數；

如下是咱們的業務需求：

 

咱們業務邏輯是這樣，彈框內部有個上傳按鈕，點擊上傳按鈕時去調取本地文件，等到點擊彈框的肯定按鈕以後纔會上傳到服務器，而後代碼以下：

data是這樣定義的，須要本身設置X-token:

 

這是點擊彈框的肯定按鈕執行的方法，經過submit（）方法，很簡單：

這個是判斷文件格式是否符合規範，不少人在before-upload這個方法裏判斷這些，可是你會發現有個問題，就是你執行此方法時不管上傳格式是否正確們都會觸發before-remove或者是on-remove這兩個方法，很奇怪，多是element組件的bug,因此須要加個判斷，如下圖中的isDel就是這層判斷：

如下是判斷刪除的方法：

 

 還有就是上傳成功後的邏輯處理：

 

記錄下此次的坑，但願之後長點心；