element之upload组件

Posted free-javax

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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

以上是关于element之upload组件的主要内容,如果未能解决你的问题,请参考以下文章

element之upload组件

Vue 之 element-ui upload组件的文件类型

使用Element的upload上传组件,不使用action属性上传

如何上传图片到七牛云

Element-ui组件库upload导出Excel表格

element UI upload组件上传附件格式限制