本文介绍了如何在Vue项目中，结合Element UI封装一个文件上传组件，实现文件上传、复用和扩展功能。组件支持限制文件类型、数量、大小，并提供了上传成功、失败、移除等回调处理。
前言：工作中用到 vue+element ui 的前端框架，使用到上传文件，则想着封装为组件，达到复用，可扩展。转载请注明出处：https://www.cnblogs.com/yuxiaole/p/9630868.html
组件代码如下：
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">
选择文件
以及：
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;
}
}
};
完。整体代码见 GitHub，喜欢就star，不定时更新。
转载请注明出处：https://www.cnblogs.com/yuxiaole/p/9630868.html
封装Vue Element的upload上传组件
本来昨天就想分享封装的这个upload组件,结果刚写了两句话,就被边上的同事给偷窥上了,于是在我全神贯注地写分享的时候他就神不知鬼不觉地突然移动到我身边,腆着脸问我在干啥呢.卧槽你妈,当场就把我吓了一 ...
基于element UI 的上传插件
为了不再重复的上传文件,做了一个统一选择文件和上传文件的 基于 element UI :http://element-cn.eleme.io 前端实现文件下载和拖拽上传 演示 用法
easy ui 异步上传文件，跨域
easy ui 跨域上传文件,代码如下: 1.html代码:(这段代码是个win窗体,我在点击上传图片按钮然后弹出一个上传图片的窗体,选择图片再进行上传,这样在form提交时,提交的参数会少一点.) ...
Ui自动化测试上传文件方法都在这里了
前言 实施UI自动化测试的时候,经常会遇见上传文件的操作,那么对于上传文件你知道几种方法呢?今天我们就总结一下几种常用的上传文件的方法,并分析一下每个方法的优点和缺点以及哪种方法效率,稳定性更高 被测 ...
vue form表单上传文件
vue element多图上传
最近项目需要优化图片上传,由单个改成多个,这里记录下自己遇到的一些问题和解决方法 本以为是传全部图片到后台,然后统一处理,但后面在Network中发现upload组件其实还是单一上传,那只能依照它的方 ...
【要什么自行车】ASP.NET MVC4笔记02：上传文件 uploadify 组件使用
参考:http://www.cnblogs.com/luotaoyeah/p/3321070.html 1.下载 uploadify 组件,copy至 Content文件夹
Angular4 后台管理系统搭建(10) - 做一个通用的可跨域上传文件的组件
写的很慢,不知不觉这是第十篇了.但是我其他事情太多,只能抽空写下.现在angular4或angular2流行的上传方式是ng2-file-upload.它的功能很强大.但是我没有配置成可以跨域上传的. ...
Vue + Element UI 实现权限管理系统 (功能组件封装)
组件封装 为了避免组件代码的臃肿,这里对主要的功能部件进行封装,保证代码的模块化和简洁度. 组件结构 组件封装重构后,试图组件结构如下图所示 代码一览 Home组件被简化,包含导航.头部和主内容三个组 ...
随机推荐
\(\S1 \) Gaussian Measure and Hermite Polynomials
Define on \(\mathbb{R}^d\) the normalized Gaussian measure\[ d \gamma(x)=\frac{1}{(2\pi)^{\frac{d}{2 ...
20169212《Linux内核原理与分析》第三周作业
最近,深入的阅读了这本书,以下是碰到的一些问题,在此和大家进行交流学习. 碰到的问题 1.为什么不要在linux内核中使用浮点数(这个问题由于书上讲的不够明白, ...
PHP无限极分类实现
简单版的PHP生成无限极分类代码.其中包括了数据库设计.以及输出分类HTML代码. SQL代码 CREATE TABLE `district` ( `id` int(10) unsigned NOT ...
javascript的语句和函数
1.for-in语句:是一种精准的迭代语句,可以用来枚举对象的属性. 2.label语句:在代码中添加标签,以便将来使用,由break和continue语句调用. 3.with语句:将代码的作用域设置 ...
android 开发-设置控件/view的水平方向翻转
设置控件沿着水平方向翻转(即Y轴180°) 看效果: 代码:
1311
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
