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