element-ui upload上传技巧

本文章应用场景是：

前端使用的是vue.js和element-ui。

上传是包含在一个表单里面，使用element-ui的upload上传组件，想实现的是在我点击上传选择文件后不让它自动提交，而是在我点击确定后，经过一系列的验证再提交。而且element-ui的upload组件上传的路径跟表单保存的路径是不一样的。具体看代码。

<!-- 新增弹窗--><el-dialog title="上传文件" :visible.sync="dialogFormVisible" width="40%"><el-form :model="form" status-icon :rules="rules" ref="form"><el-row type="flex" justify="center"><el-col :span="22"><el-form-item label="上报机构:" :label-width="formLabelWidth" prop="organization"><el-input v-model="form.organization" auto-complete="off"></el-input></el-form-item></el-col></el-row><el-row type="flex" justify="center"><el-col :span="22"><el-form-item label="上传文件:" :label-width="formLabelWidth"><el-uploadclass="upload-demo"ref="upload":with-credentials="true":limit="5":file-list="fileList":data="myData":action="uploadUrl()":headers="myHeader":on-change="addFile":on-remove="removeFile":auto-upload="false"><el-button size="small" type="primary">点击上传</el-button></el-upload></el-form-item></el-col></el-row></el-form><div slot="footer" class="dialog-footer"><el-button size="small" @click="dialogFormVisible = false">取 消</el-button><el-button size="small" type="primary" @click="insert('form')">确 定</el-button></div></el-dialog>

:file-list="fileList",这个fileList是自己定义的一个文件列表，显示的文件就是这个里边的文件。不要跟下面函数里面的fileList搞混了，函数里面的是element-ui自己封装的一个变量。具体看它的官网。
:action="uploadUrl()"是动态设置的文件上传路径。

uploadUrl:function(){return "http://127.0.0.1:8081/uploadFile";
},

:data="myData"是设置上传携带的其他的数据。

myData(){return {"businessId":this.form.fileId,"businessType":"sys_file"}
}

:headers="myHeader"是设置的请求头

myHeader(){return {"authToken":window.sessionStorage.getItem('authToken')}
},

这里值得一提的是，在使用element-ui和vue.js的时候，设置:data和:headers要在vue.js的计算属性里面添加

computed: {myHeader(){return {"authToken":window.sessionStorage.getItem('authToken')}},myData(){return {"businessId":this.form.fileId,"businessType":"sys_file"}}
},

这样就能加上，如果有其他的方法也可以试一试。

判断文件大小：

addFile(file,fileList){this.fileList = fileList;//限制上传文件为5Mvar sizeIsSatisfy = file.size < 5*1024*1024 ? true:false;if(sizeIsSatisfy){return true;}else{this.fileSizeIsSatisfy = false;return false;}
},

这里用的是：:on_change事件,它会在文件添加的时候去条用addFile方法，就做验证，fileSizeIsSatisfy是我定义的一个变量，当我上传的文件中存在大于5M的文件时，fileSizeIsSatisfy = false，在点击提交时就会提示存在大于5M的文件，不能提交。暂时没找到添加一个文件的时候，就让它从文件列表中移除，这个fileList是它封装的一个文件列表，暂时没找到，只能先这样折中的办法。

下面就是我点击确认的时候执行的insert方法。

insert(formName) {this.$refs[formName].validate((valid) => {if (valid) {if(this.fileList.length <= 0){this.$message.error("请至少上传一个文件！");return;}if(!this.fileSizeIsSatisfy){this.$message.error("上传失败！存在文件大小超过5M！");return;}//手动上传文件，在点击确认的时候 校验通过才会去请求上传文件的urlthis.$refs.upload.submit();this.postRequest("/api/rcs/sysFile",this.form).then((res)=>{if(res.data.status == 200){this.form = {};this.fileList = [];this.dialogFormVisible = false;this.$message.success('新增成功！');this.getUploadList(1);}else{this.$message.error(res.data.msg);}}).catch((error)=>{this.$message.error(error)})} else {this.$message.error('error submit!!');return false;}});
},

在执行到this.$refs.upload.submit();的时候才会去请求文件上传的地址进行文件上传。

element-ui upload上传技巧相关推荐

element ui视频上传（已上线，拿去即用）
element ui视频上传 + 进度条实现(拿去即用) 1.template 部分 2. script 部分 3. scss 部分 1.template 部分 <template>< ...
element ui图片上传-实现单图上传
1. 业务需求: 需要把多图上传的效果改造成为单图上传的效果 2. 效果展示 (1) 原来官网效果: https://element.eleme.cn/2.0/#/zh-CN/component/up ...
Element中Upload上传组件的http-request方法
刚开始接触vue,新框架是vue+Element.其中写到上传组件的时候卡住了.问题详细: Upload上传组件中的action是必选参数,但是调后台接口的时候需要手动加参数和token,比较麻烦. ...
vue2 - 基于Element UI实现上传Excel表单数据功能
一.项目场景批量数据上传后台,需要从后台下载一个固定格式的 Excel表格,然后在表格里面添加数据,将数据格式化,再上传给后台,后台做解析处理,往数据库添加数据二.实现功能展示点击导入excel ...
Vue element ui + AmazonS3上传文件功能
一.在上传之前,需要先获取到AWS的S3服务的Access key ID和Secret access key 二.代码代码: <template><div class="u ...
element ui 文件上传限制文件类型
问题描述: 限制文件的上传类型,在change事件或者是成功的回调函数中,做限判断会触发事件冒泡,并且无法删除页面上的展示列表中的文件解决方案: 在用户选择文件的时候就只能选择对应文件的类型实现方 ...
element ui 图片上传_游民晚播报：PS5手柄续航情况测试 UI界面概览放出
各位朋友晚上好,现在为您带来今天的晚间播报.一起来回顾一下今天白天游戏圈内外都有哪些要闻.趣闻. 要闻回顾: 1.PS5 DualSense手柄续航情况触觉反馈密集游戏更耗电新闻原文:点击查看 P ...
element ui upload组件文件上传一次后，不论是上传成功之后修改文件再上传还是上传失败重新上传，再次点击上传均无反应。
问题: Element UI Upload 组件文件上传一次后,不论是上传成功之后修改文件再上传还是上传失败重新上传,再次点击上传均无反应. 原因: 第一次上传文件后,浏览器还保存着我们已经上传的文 ...
Vue上传文件 iview Upload UI 组件上传组件
Vue上传文件 input支持上传文件定义type类型,隐藏样式第三定义change事件拿到file 的相关信息,accept限制支持的文件类型然后给button增加点击事件 template部 ...

element-ui upload上传技巧

element-ui upload上传技巧相关推荐

最新文章

热门文章