vue项目做导入excel（通过base64）

最近项目的需求，记录下笔记

要求：

1. .xls 后缀名文件

2. 文件不超过10M

3. 转成base64传给后端

<el-upload
    action=""
    accept=".xls"
    :show-file-list="false"
    :before-upload="beforeUploadFile"
    :http-request="uploadFile"
>
    <el-button size="small" type="primary">导入excel</el-button>
</el-upload>


// 点击导入excel
uploadFile(res) {
  let file = res.file
  this.getBase64(file).then(baseFile => {
    let data = baseFile.split(';')[1] // base64的截取,根据后端要求截取的后半截的
    this.saveExcelUpload(file, data)
  })
},

// 文件上传格式, 大小验证
beforeUploadFile(file) {
  let extension = file.name.substring(file.name.lastIndexOf('.')+1)
  let size = file.size / 1024 / 1024
  if(extension !== 'xls') {
    this.$message.warning('只能上传后缀是.xls的文件')
  }
  if(size > 10) {
    this.$message.warning('文件大小不得超过10M')
  }
},

// 获取文件转base64
getBase64(file) {
  return new Promise(function(resolve, reject) {
    const reader = new FileReader()
    let result = ''
    reader.readAsDataURL(file)
    reader.onload = function() {
      result = reader.result
    }
    reader.onerror = function(error) {
      reject(error)
    }
    reader.onloadend = function() {
      resolve(result)
    }
  })
},

// 上传excel文件
saveExcelUpload(file, baseFile) {
  this.$api.saveExcelUpload({
    name: file.name,   // 文件名
    fileVal: baseFile, // base64
  }).then(res => {
      this.$message.success('导入成功')
    }else {
      this.$message.error('导入失败')
    }
  }).catch(err => console.log(err))
}