Upload files to the background;
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"13 is> Introducing </ EL-Button> </el-upload>
The figure above, limit is to limit the number of files you can upload up; action to address is the address of the interface file passed to the background; fileList is all the information of the selected file, passed as a parameter into the event, you can view its contents;
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 }
Delete files events:
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 }