vue element upload 组件实现多个文件一个接口上传

Posted 2023-05-02

参考技术A upload 组件中上传文件会调多次接口，一个文件一个文件进行上传，现在需求需要在一个接口里上传多个文件，那我们就要对这个组件做一下改造。

element之upload组件

最近做项目的附件上传，前端vue用到element的上传，记录下以备不时之需

 View Code

单个文件上传的HTML。

下面为js脚本

 1 export default {
 2   name: "schemeList",
 3   data() {
 4     return {
 5       loading: false,
 6       attachList:[],
 7       attachmentList: [],
 8       viwMode: "add",
 9       tableHeight: 160,
10       uploadUrl: "/upload",
11       form: {
12         file: ""
13       },
14       fileList: [],
15       importHeaders: {
16         enctype: "multipart/form-data"
17       },
18     };
19   },
20   watch: {},
21   computed: {},
22   created: function() {},
23   mounted: function() {
24   },
25   methods: {
26     fileChange(file) {
27       this.form.file = file.raw;
28       this.fileList.push(file.raw); //上传文件变化时将文件对象push进files数组
29       //alert(file.raw);
30     },
31     handleProgress(event, file, fileList) {
32       alert("in progress");
33     },
34     submitUpload() {
35       let that = this;
36       debugger;
37       if(that.form.file==null || that.fileList.length == 0){
38          that.$message.info("请选择要上传的文件！");
39         return;
40       }
41 
42       that.loading=true;
43       let formData = new FormData();
44       formData.append("file", that.form.file); //单个文件
45       that.$axios
46         .post(that.uploadUrl, formData, {
47           "Content-Type": "multipart/form-data"
48         })
49         .then(res => {
50           that.$refs.upload.clearFiles();
51           that.fileList = [];
52           that.$message.success(res.data);
53           console.log(res);
54         })
55         .catch(err => {
56           that.$message.error(err.data);
57           console.log(err);
58         });
59     },
60     handleRemove(file, fileList) {
61       this.$refs.upload.clearFiles();
62       this.fileList = [];
63       console.log(file, fileList);
64     },
65     handlePreview(file) {
66       alert(file);
67       console.log(file);
68     }
69   }
70 };

View Code

后端用到的是springboot，直接上代码

 View Code

yml文件配置

 View Code