vue+element封装upLoad

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

// 创建 vueFileUpload.vue文件

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

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

多个上传

单个上传

// 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.扩展:

在开发的过程中,我们会遇到下载文件的需求,下面我来分享一下后端接口通过流的形式返回,前端怎么处理,废话不多说,直接上代码

async exportDataEvent (formData,fileName) {
    let fileName = this.splitFileName(this.SingeFileData.name);
    let res = await exportApi(formData,fileName);
       // console.log(res);

window.open(`${this.$_httpUrl}/appconfig/sdkdetection/export/${fileName}`);// 下载文件
    },

// 去掉文件后缀名
splitFileName (text) {
    let pattern = /\.{1}[a-z]{1,}$/;
    if (pattern.exec(text) !== null) {
        return (text.slice(0, pattern.exec(text).index));
    } else {
        return text;
    }
},

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