vue+element封装upLoad

1.开发环境 vue22.电脑系统 windows11专业版3.在开发的过程中,我们会需要使用到上传的组件;当有多个页面需要使用到上传的时候就比较麻烦;我们可以再次封装。4.废话不多说,直接上代码:

// 创建 vueFileUpload.vue文件
<template>
    <el-upload
        action=""
        :on-change="(file, fileList)=>{FileChange(file, fileList,{type:FileUploadType})}"
        :show-file-list="false"
        :multiple="IsMultiple"
        :auto-upload="false"
        accept=".txt"
        ref="fileUpload"
    >
    </el-upload>
</template>

<script>
export default {
    name: "vueFileUpload",
    props:{
        // 文件上传
        FileChange:{
            default() {
                return function () {} ;
            }
        },
        // 是否多选
        IsMultiple :{
            default () {
                return true;
            }
        },
        FileUploadType:{
            default () {
                return "Single";
            }
        }
    },
    computed:{
        dataChange () {
            const {IsMultiple} = this;
            return {IsMultiple};
        }
    },
    watch:{
        dataChange:{
            handler(newValue,oldValue) {
                // console.log("监听到了数据的变化",newValue);
                this.$refs.fileUpload.$children[0].$refs.input.webkitdirectory = newValue.IsMultiple ? true : false;
            },
            deep: true
        }
    },
};
</script>

5.在页面中使用方法如下:

// 导入 VueFileUpload组件
import VueFileUpload from "./vueFileUpload.vue";

<el-button type="primary" size="small" @click="FileClick('Some')">多个上传</el-button>

<el-button type="primary" size="small" @click="FileClick('Single')">单个上传</el-button>

<VueFileUpload :FileChange="FileChange" :IsMultiple="IsMultiple" ref="VueFileUploadRef" :FileUploadType="FileUploadType" />

// return 
IsMultiple:false,
FileUploadType:'Single',

// methods
FileClick (type) {
    // console.log(type);
 this.FileUploadType = type == 'Single' ? "Signle" : "Some";

// 是否多选
 this.IsMultiple = type == 'Single' ? false : true;
   
// 是否上传文件夹 this.$refs.VueFileUploadRef.$refs.fileUpload.$children[0].$refs.input.webkitdirectory = type == 'Single' ? false : true;

// 通过refs 触发选择文件方法
 this.$refs.VueFileUploadRef.$refs.fileUpload.$refs['upload-inner'].handleClick();
}

6.本期的分享到了这里就结束啦,希望对你有所帮助;让我们一起努力走向巅峰。