vue中上传接口file表单提交二进制文件流

1.使用elementui上传组件

要做一个选择文件后，先不上传，等最后点击确定后，把file二进制流及附加参数一起提交上去。

首先使用elementui中的上传组件，设置auto-upload=false，也就是选择文件后不立刻上传。

 <el-upload
            ref="upload"
            :limit="1"
            accept=".wav, .mp3"
            :headers="upload.headers"
            :action="upload.url"
            :disabled="upload.isUploading"
            :on-progress="handleFileUploadProgress"
            :auto-upload="false"
            :on-change="fileChange"
            :on-remove="fileremove"
          >
            <el-button size="small" type="primary">选择文件</el-button>
          </el-upload>

 // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/audio/audioFileUpload",
      },

    // 文件更改
    fileChange(file, e) {
      console.log(file, e);
      this.dataForm.file = file.raw;
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件删除
    fileremove(file, fileList) {
      this.dataForm.file = null;
    },

 在选择文件后获取到文件file流，把file.raw赋值给form中的rile

2.创建FormData

上传file二进制文件以及参数需要用到FormData

 let formData = new FormData();  //创建form对象
      formData.append("file", this.dataForm.file);  //file文件流参数
      formData.append("phoneNumber", this.dataForm.phoneNumber);//参数
      formData.append("callTime", this.dataForm.callTime);//参数
      formData.append("remark", this.dataForm.remark);//参数

3.接口提交form对象，表单模式

需要在请求头设置accept和content-type，不然不行

 headers: {
      accept: "*/*",
      "Content-Type": "multipart/form-data;charset=UTF-8",
    },

 设置完请求头后，接口提交为表单数据，file二进制的就可以了，如下图

如果未设置会是出现正常post提交的方式，如下图，所以一定要设置请求头格式