vue+element ui 的上传文件使用组件
前言：工作中用到 vue+element ui 的前端框架，使用到上传文件，则想着封装为组件，达到复用，可扩展。转载请注明出处：https://www.cnblogs.com/yuxiaole/p/9630868.html
网站地址：我的个人vue+element ui demo网站
github地址：yuleGH github
组件代码如下：
<div id="uploadComponent" style="display: none"> <el-upload ref="upload" class="upload-demo" :action="action" :data="data" :file-list="fileList" show-file-list :limit="limit" :accept="accept" :disabled="disabled" :auto-upload="true" :on-error="handleError" :on-success="handleSuccess" :on-remove="handleRemove" :on-exceed="handleExceed" :on-preview="handlePreview" :before-upload="beforeAvatarUpload" :before-remove="beforeRemove"> <el-button size="small" type="primary">选择文件</el-button> </el-upload> </div>
以及：
<script type="text/javascript"> var uploadComponent = { template : document.getElementById("uploadComponent").innerHTML, data : function(){ return { action : this.uploadUrl, data : {},//向后台传额外参数 limit : this.fileLimit, disabled : this.uploadDisabled, //接收文件类型，从数据字典取值 accept : ".jpg,.pdf", //文件大小，从数据字典取值 uploadMaxSize : 1024*1024 } }, props: { /** * 默认显示的附件 */ attachmentList : { type: Array, default : function(){ return []; } }, /** * 初始化上传组件，是否禁用 */ uploadDisabled : { type: Boolean, default : false }, /** * 上传地址 */ uploadUrl : { type : String, required : true }, /** * 文件 最大允许上传个数 */ fileLimit : { type : Number, default : 5 } }, computed: { //默认文件列表 fileList : { get : function(){ if(!this.attachmentList){ return []; } //可能会根据后台字段做一些特殊转换 return this.attachmentList; }, set : function(){ console.log("set"); } } }, watch:{ }, created:function () { }, mounted : function(){ var _self = this; this.$nextTick(function () { }) }, methods : { /** * 获取当前所有的附件 * @return {Array} */ getUploadFilesList : function(){ var uploadFiles = this.$refs.upload.uploadFiles; return uploadFiles; }, /** * 设置组件可用 */ setEditable : function(){ this.disabled = false; }, /** * 设置组件不可用 */ setDisEditable : function(){ this.disabled = true; }, /** * 上传失败 * @param err * @param file * @param fileList */ handleError : function(err, file, fileList){ showAlert.call(this, '上传失败，系统未知错误！错误码为【500】', iconConstants.ERROR); }, /** * 上传成功 * @param response * @param file * @param fileList */ handleSuccess : function(response, file, fileList){ if(response.id){ //成功 showAlert.call(this, "上传成功！", iconConstants.SUCCESSAUTO); }else{ //出错 showAlert.call(this, "上传失败！" + response.buinessMsg, iconConstants.ERROR); //删除该文件 var i = this.getFile(file, fileList); fileList.splice(fileList.indexOf(i), 1); } }, getFile: function (file, fileList) { fileList.forEach((x, i)=>{ if(x.uid === file.uid){ return x; } }); return null; }, /** * 移除文件之前 * 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止上传。 * @param file * @param fileList */ beforeRemove : function(file, fileList){ if(file){ var _self = this; var result = showConfirmNoCancelCallBack.call(_self, "是否删除（" + file.name + "）？", iconConstants.QUESTION, function(){ showAlert.call(_self, "ajax访问后台删除，操作成功！", iconConstants.SUCCESSAUTO); }); return result; } }, /** * 删除文件 * @param file * @param fileList */ handleRemove : function(file, fileList){ }, /** * 文件超出个数限制时的钩子 * @param files * @param fileList */ handleExceed : function(files, fileList){ showAlert.call(this, "当前限制选择 "+this.limit+" 个文件，本次选择了 "+files.length+" 个文件，共选择了 "+files.length + fileList.length+" 个文件", iconConstants.WARNING); }, /** * 点击文件列表中已上传的文件时的钩子 * @param file */ handlePreview : function(file){ console.log(file); showAlert.call(this, "访问后台下载，操作成功！", iconConstants.SUCCESSAUTO); }, /** * 校验文件 * 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。 * @param file * @return {boolean} */ beforeAvatarUpload: function(file){ if (file.size > this.uploadMaxSize) { showAlert.call(this, "您文件大小不合法", iconConstants.ERRORAUTO); return false; } if(file.name.indexOf(",") > 0){ //您的文件名不合法，不能包含逗号，请检查后重新上传! showAlert.call(this, "您的文件名不合法，不能包含逗号，请检查后重新上传!", iconConstants.ERRORAUTO); return false; } return true; } } }; </script>
完。整体代码见 GitHub，喜欢就star，不定时更新。
转载请注明出处：https://www.cnblogs.com/yuxiaole/p/9630868.html
