elementui
<el-upload
class="upload-demo"
action="/api-cdc/upload/attachment"
ref="upload"
:http-request="httpRequest"
:on-preview="handlePreview"
:on-remove="handleRemove"
:on-change="onChange"
:before-remove="beforeRemove"
multiple
:on-exceed="handleExceed"
:file-list="fileList"
:auto-upload="false"
>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button
style="margin-left: 10px;"
size="small"
type="success"
@click="submitUpload"
>上传到服务器</el-button>
<!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
</el-upload>
js
//文件上传
httpRequest(file) {
console.log(file);
},
submitUpload(file) {
this.$refs.upload.submit();
let param = new FormData();
this.fileList.forEach(file => {
param.append("files", file.raw); //此处一定是append file.raw 上传文件只需维护fileList file.raw.name要加上
param.append("fileNames", file.name);
});
//后台接口
addfile(param)
.then(res => {
if (res.code == ) {
this.experfrom.healthOffice.attachments = res.data;
console.log(this.experfrom.healthOffice.attachments);
this.$message({
message: "上传成功！",
type: "success"
});
} else {
this.$message.error(res.message);
}
})
.catch(err => {
console.log(err);
});
},
onChange(file, fileList) {
this.fileList = fileList;
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(
`当前限制选择 个文件，本次选择了 ${
files.length
} 个文件，共选择了 ${files.length + fileList.length} 个文件`
);
},
使用http-request覆盖默认的上传行为，可以自定义上传的实现 但是上传接口不要设置在里面 ，如果设置在里面会导致多个文件分开传到后台。 将上传接口放在submitUpload中,就可以实现上传多个文件调用一次接口