前端文件上传

文件上传分为两步：一、获取文件内容。二、请求接口，将内容放在 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: () => {
            // 失败
        },
      })
}