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 };
后端用到的是springboot,直接上代码
View Code
yml文件配置
View Code
以上是关于element之upload组件的主要内容,如果未能解决你的问题,请参考以下文章
Vue 之 element-ui upload组件的文件类型