码迷,mamicode.com
首页 > 其他好文 > 详细

element之upload组件

时间:2020-05-12 09:57:12      阅读:75      评论:0      收藏:0      [点我收藏+]

标签:app   one   dac   event   type   content   直接   ||   move   

最近做项目的附件上传,前端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组件

标签:app   one   dac   event   type   content   直接   ||   move   

原文地址:https://www.cnblogs.com/free-javax/p/12873987.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!