关于vue.js:vueelement封装upLoad

1. 开发环境 vue2
2. 电脑系统 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. 本期的分享到了这里就完结啦, 心愿对你有所帮忙; 让咱们一起致力走向巅峰。