1. 程式人生 > >vue實現檔案上傳

vue實現檔案上傳

檔案上傳的傳統方式是通過 form 表單提交,但是今天我們將換一種方式來實現這個功能。同一口味的東西吃多了還會膩呢,所以適當的時候換一換口味還是有必要的,好了,直接進入正文。

首先,來介紹一下我們今天的主角 --- FormData,是的,就是他,雖然他和 form長得有點像,但是是2個不一樣的東西。對於form相信大家一定不陌生,所以我們重點介紹一下 FormData。

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) => {}) // 傳送請求
到這裡,我們就已經成功實現了檔案的上傳,是不是覺得很簡單?小夥伴們,趕緊動手試一試吧。