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',// methodsFileClick (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.本期的分享到了这里就完结啦,心愿对你有所帮忙;让咱们一起致力走向巅峰。