JS 读取本地 excel 文件转为 base64 上传至服务器

需求描述：一般使用 multipart/form-data 请求头上传文件，由于上传服务器在内网的限制，配合后端的同事要求，需要将文件转换为 base64 字符后上传至服务器。

首先来介绍 element-ui 的 upload 上传组件。

<el-upload
  ref="upload"
  action="placeholder"
  accept=".xls,.xlsx"
  :file-list="fileList"
  :before-upload="beforeUpload"
  :http-request="handleHttpRequest"
  :show-file-list="false"
  list-type="picture"
>
  <el-button
    size="medium"
    type="primary"
    @click="handleClick('upload')"
  >
    导入 excel
  </el-button>
</el-upload>

这里有几个配置需要详细介绍。

1.accept：接受上传的文件类型

2.file-list：上传的文件列表

3.before-upload：上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。

beforeUpload (file) {
  this.fileList = [...this.fileList, file]
  return true
},

4.http-request：覆盖默认的上传行为，可以自定义上传的实现。

async handleHttpRequest () {
  // data 为文件转为 base64 后的数据
  const data = await this.getBase64(this.fileList[0])

  // 调用接口处理   
},

那如何将文件转为 base64 的呢？这里针对的是非选项上传文件。     

1.通过html5提供的FileReader读取到文件中的数据。

2.readAsDataURL 会将文件内容进行 base64 编码后输出。

3.加载成功后，即 reader.onload 方法中，数据保存在对象的 result 属性中。

4.在加载结束后，即 reader.onloadend 方法中，使用 Promise 将结果返回。

getBase64 (file) {
  return new Promise(function (resolve, reject) {
    let reader = new FileReader()
    let imgResult = ''
    reader.readAsDataURL(file)
    reader.onload = function () {
      imgResult = reader.result
    }
    reader.onerror = function (error) {
      reject(error)
    }
    reader.onloadend = function () {
      resolve(imgResult)
    }
  })
},