文件上传——将文件转成base64传给后端

文中例子为上传pdf

fileListFile:[]
页面代码：

<el-form-item label="上传pdf文件：" label-width="150px" prop="pdf">
    <el-upload class="upload-demo" :multiple="false" accept='.pdf' action="#" :http-request="httpRequest" :on-change="handleChange" :before-upload="beforeUpload_u" :file-list="fileListFile" >
         <el-button size="mini" type="primary">点击上传</el-button>
    </el-upload>
</el-form-item>

转base64，可以不经过后台(action不指定地址)，可上传。这样可以减少前后端的交互，减少服务器端无用的图片资源。
生成的base64编码的图片是2进制流，其优点是减少http的请求，缺点是不能跨域缓存
对应的方法。

//覆盖默认的上传行为，可以自定义上传的实现
httpRequest(data) {
      // 调用转方法base64
      this.getBase64(data.file).then(resBase64 => {
        this.signForm.pdf = resBase64.split(',')[1]
      })
      this.$message.success('文件上传成功')
    },
// 转base64码
      getBase64(file) {
        return new Promise((resolve, reject) => {
          const reader = new FileReader();
          let fileResult = '';
          reader.readAsDataURL(file);
          // 开始转
          reader.onload = () => {
            fileResult = reader.result;
          }
          // 转 失败
          reader.onerror = (error) => {
            reject(error)
          }
          // 转 结束
          reader.onloadend = () => {
            resolve(fileResult)
          }
        })
      },

//文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
//上传文件让第二次覆盖第一的文件
    handleChange(file,fileList){
      if (fileList.length>0) {
          this.fileListFile=[fileList[fileList.length-1]]
      }
    },

//上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
beforeUpload_u(file, fileList){
      var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
      const extension = testmsg === 'pdf'
      var bool = false;
      if(extension){
        bool = true;
      } else{
        bool = false;
      }
      if(!extension) {
        this.$confirm(`上传文件只能是pdf格式!`); 
      }
      return bool;
    },