vue之element-ui文件上傳
文件上傳需求
對於文件上傳，實際項目中我們的需求一般分兩種：
對於單個的文件上傳，比如拖動上傳個圖片之類的，或者是文件。
和表單一起實現上傳（這種情況一般都是文件上傳之后，后端返回保存在服務器的文件名，最后和我們的表單一起上傳）
對於第一種情況，通過看api就很明了。
http://element-cn.eleme.io/#/zh-CN/component/upload
對於第二種情況，我們需要考慮一個問題就是手動異步上傳，后面會具體說明一下，您耐心往下看...
識別幾種文件上傳格式
在上傳文件之前，我們需要了解我們前端在請求數據的時候，幾種格式的區別。因為前后的格式不統一，就會導致我們的上傳失敗，畢竟踩坑了，真的。
1.application/x-www-form-urlencoded
最常見的post提交編碼格式，一般的表單提交默認以此方式，具體的請求格式看下面：
2.multipart/form-data
這個比較常見的post提交方式，我們通常是在文件上傳的時候使用。形式特別好認，一長串的字符...
3.application/json
使用vue現在我們用的服務都是axios，（vue-resource論壇里不更新了），axios默認的提交就是用的這種方式
json就不截圖了，只要是我們一般的請求，都基本是json格式，肯定早就清楚了。
具體的MIME詳情參見 MIME types
element-ui封裝upload上傳
通過element-ui的api很容易的就知道文件上傳，按照示例來，不要偷懶，慢慢看，畢竟自己不知道已經看了多少遍了。然后當你能夠上傳成功的時候，看下面圖：
已經成功上傳了，那么這些東西就很簡單了。
配置一下header
我們這里使用的就是application/x-www-form-urlencoded編碼格式來上傳form表單數據，通過上面的解釋，我們上傳的文件編碼格式就是multipart/form-data （這個格式的請求太好認， 一長串有沒有，里面包括了文件名...）就是我們實現文件的上傳。當你能夠獲取到后端返回的文件名，並且以表單的格式提交數據，以為要成功的時候發現，too young too simple。仍然提交失敗，后端數據沒獲取對
那么怎么辦，最后是使用qs.stringfy()格式化數據，也就是提交的數據要經過轉化： qs.stringfy(data)， 成功post到服務器（興奮好久...）
兩者的數據格式還是有區別的...
手動上傳（文件上傳成功才提交表單數據）
之前一直糾結的就是，怎么去實現比如我點擊提交，那么讓用戶覺得，哦，我這才把文件和表單內容成功提交。考慮到，文件不能選擇就提交到服務器。那么就用:auto-upload="false"干掉自動上傳文件，因為默認是自動上傳的（看api哈）。然后就是關鍵的了，我點擊提交執行方法使用axios提交數據到服務器，那么同時也要提交文件，但是前提是我的表單數據比如等到文件都提交成功，然后返回服務器保存的文件名，那么才能正確的去提交表單數據。怎么實現異步呢？搜索了很多文章，最后自己采用了element-ui封裝的on-success方法，想想我們使用submit提交文件，成功了是不是要執行對應的on-success方法？
那么正好，思路就是：點擊提交，那么我們執行一個方法，這個方法里面就包含一個文件的提交，那么在這個文件提交成功的函數里面，我們可以對返回值執行一些操作，最后還有文件繼續在當前的成功函數里面執行提交，依次往下，對於最后一個，那么這時候我們就可以提交表單數據了，我們該獲取的都獲取了，這時候所有的文件都已經提交完成了。（看圖說話）
1、點擊提交執行
2、uploadscan上傳成功后肯定會執行成功函數：
好的這里看到了，有一個uploadattachment的提交（因為項目中有兩個文件上傳）
3、最后uploadattachment上傳成功后：
具體的參數應該都能看得懂的（聰明的你們...）
這樣的話，我們就能夠實現，手動異步上傳了。
文件上傳中，我們還會遇到accept，也就是可以接受的文件類型。一個在線工具分享一下 在線工具，里面好包括轉義字符等等
總結：
1、文件上傳注意編碼格式，前后端溝通好，比如這次的項目中，用的就是application/x-www-form-urlencoded格式
2、手動上傳，切入點就是element-ui自己封裝的on-success文件
最后，這是項目中遇到為問題，一步步的解決，可能和大家想實現的某些效果有些差距，但是文件上傳主要和后端要溝通好是什么樣的請求。請多多指教。（后面總結就是，任何問題，只要自己弄出來了，興奮是一回事，是自己會覺得其實並沒有想象中那么難，當然過程一般都挺艱難。畢竟對於自己太容易也沒啥好興奮的）
最后，我們也可以通過http-serve自定義文件上傳。這時候就需要用到new FormData對象。官方鏈接 FromData對象的使用