Element UI中的上传文件功能

上传文件给后台；

 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       }