前端文件上傳：使用FileReade讀取文件

文件上傳分為兩步：一、獲取文件內容 二、請求接口，將內容放在 body 中發送給后端

一、獲取文件內容

上傳頁面如下

<input type="file" @change="fileChange">
 進度：<span id="progress"></span>

js代碼：讀取當前上傳的文件內容用於展示或其他用途

fileChange (e) {
      const progress = document.getElementById('progress')
      const files = e.target.files
      if (files.length > 0) {
          const file = files[0] // 當前操作的文件對象
          const reader = new FileReader()
          if (/text+/.test(file.type)) {
              // text類型
              reader.readAsText(file, 'utf-8')
          } else if (/image+/.test(file.type)) {
              // image類型
              reader.readAsDataURL(file)
          }
          reader.onload = function () {
              console.log(this.result) // 文件內容
          }
          // 上傳進度
          reader.onprogress = ev => {
              if (ev.lengthComputable) {
                  progress.innerHTML = ev.loaded / ev.total
              }
              console.log(ev.total) // 總大小
              console.log(ev.loaded) // 已經上傳的大小
          }
      }
  }

這里用到了FileReader類來讀取文件，下面簡單介紹一下FileReader類的屬性和方法

FileReader讀取文件方法如下：

• readAsText(file, encoding)：將文件讀取為文本，其中第二個參數是文本的編碼方式，默認值為 UTF-8
• readAsDataUrl(file): 將文件讀取為DataURL
• readAsBinaryString(file): 將文件讀取為二進制字符串
• readAsArrayBuffer(file): 將文件讀取為ArrayBuffer

PS: 以上讀取到的結果都會保存在result屬性中，如果讀取失敗，則 result 的值為 null ，否則即是讀取的結果。

FileReader的事件如下：

• onloadstart : 開始
• onprogress : 正在讀取，每隔50ms左右，會觸發一次progress事件
• onload : 讀取成功
• onloadend ：讀取完成，無論成功失敗
• onerror : 讀取出錯

二、將內容通過接口上傳至后端

示例：

fetch("http://xxxx.xxx", { // 發起請求
      method: "post",
      body: fileData,
      Headers: {
        "X-CSRFToken": "xxxxxx", // 與后端商量好的請求頭
        "......": "......"
      }
    }).then(res => {
      if (res.status !== 200) {
        console.log("上傳失敗", res)
      } else {
        console.log("上傳成功", res)
      }
    })

注意事項：

• 方法一般為POST
• Headers: 一般為用戶信息的驗證，所需字段需要與后端約定好
• body：上傳的文件數據，一般為文件對象，即file。有時需要FormData 類型的，就轉一下：

fileChange (e) {
     const file = e.target.files[0]
     const formData = new FormData();
     formData.append('file', file)
     // 這只是個簡單的例子
      reqwest({
        url: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
        method: 'post',
        data: formData,
        success: () => {
            // 成功
        },
        error: () => {
            // 失敗
        },
      })
}