上传文件给后台;
1 <el-upload 2 style="display:inline-block" 3 :limit="5" 4 class="upload-demo" 5 ref="upload" 6 :action="uploadUrl" 7 :file-list="fileList" 8 :http-request="uploadSectionFile" 9 :auto-upload="false" 10 :before-remove="handleRemove"> 11 <el-button slot="trigger" size="small" type="primary" plain>选取文件</el-button> 12 <el-button style="margin-left: 10px;" size="small" icon="el-icon-upload2" type="success" @click="submitUpload">导入</el-button> 13 </el-upload>
上图中,limit是限制最多可上传文件的个数;action的地址是将文件传给后台的接口地址; fileList是选择的文件的全部信息,在事件中作为参数传进去,可以查看其内容;
1 uploadSectionFile(param){ 2 var fileObj = param.file; 3 // FormData 对象 4 var form = new FormData(); 5 // 文件对象 6 form.append("file", fileObj); 7 form.append("userId", this.userId); 8 form.append("userName", this.userName); 9 axios({ 10 method: ‘post‘, 11 url: ‘http://eiss-my-dev.cnsuning.com:81/eiss-admin/attach_new/uploadAttachment.do‘, 12 headers: { 13 ‘Content-Type‘: ‘multipart/form-data‘ 14 }, 15 data:form 16 }).then(res => { 17 if(res.data.msgCode == ‘1‘){ 18 this.$message({ 19 type:‘success‘, 20 message:res.data.msgDesc 21 }) 22 this.attachMentCode = res.data.data.attachmentCode//附件编码 23 this.attachmentId = res.data.data.attachmentId//标志 24 } else { 25 this.$message({ 26 type:‘error‘, 27 message:res.data.msgDesc 28 }) 29 } 30 }) 31 }
删除文件事件:
1 //删除时 2 handleRemove(file, fileList) { 3 var data = { 4 attacMentCode: this.attachMentCode 5 } 6 deleteAttachment(data).then(res=>{ 7 if(res.msgCode == ‘1‘){ 8 this.$message({ 9 type: ‘success‘, 10 message: res.msgDesc 11 }) 12 this.attachMentCode = ‘‘ 13 }else if(res.msgCode == ‘0‘){ 14 this.$message({ 15 type: ‘error‘, 16 message: res.msgDesc 17 }) 18 } 19 }) 20 }
原文:https://www.cnblogs.com/lesliejavascript/p/10975160.html