首页 > Web开发 > 详细

Element UI中的上传文件功能

时间:2019-06-04 19:03:23      阅读:436      评论:0      收藏:0      [点我收藏+]

上传文件给后台;

 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       }

 

Element UI中的上传文件功能

原文:https://www.cnblogs.com/lesliejavascript/p/10975160.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!