vue 實現文件上傳

文件上傳的傳統方式是通過 form 表單提交，這裏將換一種方式來實現這個功能。

使用 FormData，雖然它和 form 長得有點像，但是是兩個不一樣的東西。

FormData 對象可以組裝一組用 XMLHttpRequest 發送請求的鍵 / 值對. 它可以靈活方便的發送表單數據, 因此可以獨立於表單使用. 如果把表單的編碼類型設置爲 multipart/form-data, 則通過 FormData 傳輸的數據格式和表單通過 submit() 方法傳輸的數據格式相同.

<input type="file" class="file"> // 通過file來選擇需要上傳的文件
var formData = new FormData() // 聲明一個FormData對象
var formData = new window.FormData() // vue 中使用 window.FormData(),否則會報 'FormData isn't definded'

formData.append('userfile', document.querySelector('input[type=file]').files[0]) // 'userfile' 這個名字要和後臺獲取文件的名字一樣;
                                                                                 //'userfile'是formData這個對象的鍵名

var options = {  // 設置axios的參數
        url: '請求地址',
        data: formData,
        method: 'post',
        headers: { 
        'Content-Type': 'multipart/form-data'
    }
}
this.axios(options).then((res) => {}) // 發送請求

這就已經成功實現了文件的上傳了

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/fpFKpa36xJLV7G9lFbL_OQ