element-ui 多文件上传到服务器一次请求执行
2021-10-14 本文已影响0人
_浅墨_
默认上传事件会执行多次网络请求。修改下面方法,可将多次上传网络请求合并为一次上传网络请求:
<el-form-item label="附件上传到服务器">
<el-upload ref="redmineUpload" :file-list="field142fileList"
:multiple="true"
:limit="5"
:action="redmineUpload.url"
v-loading="redmineUpload.isUploading"
:on-change="handleChange"
:before-upload="field112BeforeUpload"
:auto-upload="false"
:on-progress="handleFileUploadProgress"
:http-request="uploadFile"
:show-file-list="true"
:on-success="verificationSpecificationRedmineUpload">
<el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
</el-upload>
</el-form-item>
// 文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用
handleChange(file, fileList) {
this.redmineUploadSelected = true;
this.field142fileList = fileList
},
// 删除文件之前的钩子,参数为上传的文件和文件列表,若返回 false 或者返回 Promise 且被 reject,则停止删除
handleRemove(file, fileList) {
this.field142fileList = fileList
},
// 上传文件
uploadFile(file) {
},
/** 调用接口上传 */
httpRequestConfirm() {
this.loading = true;
// 执行上传 redmine 事件
const formData = new FormData()
formData.append("instanceId", this.instanceId)
formData.append("userId", this.username)
this.field142fileList.forEach((file) => {
formData.append('file', file.raw)
})
uploadRedmineFilesToRedmine(formData,this.instanceId,this.username).then(res => {
this.loading = false;
this.$refs.redmineUpload.clearFiles()
this.msgSuccess("上传成功")
this.$refs['elForm'].resetFields();
this.$emit('attachmentuploadclose')
}).catch((err)=>{})
}