广州网站建设 推广公司哪家好留学网站 模板

1.使用elementui上传组件

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

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

 <el-uploadref="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提交的方式，如下图，所以一定要设置请求头格式