fairy-webuploader/template/AbstractTemplate.js

/**
 * 抽象模板
 * @param el 上传器容器
 * @param options 配置
 * @param options.handleFileSelect 选择文件回调
 * @param options.styleId 样式id
 * @constructor
 */
export default class AbstractTemplate {
    constructor(el, options) {
        if (!el) {
            throw new Error('el 不能为空');
        }
        if (!options?.handleFileSelect) {
            throw new Error('handleFileSelect   方法不能为空');
        }
        const { handleFileSelect,preview,...args } = options
        this.el = el;
        this.container = document.querySelector(el) || document.body;
        this.abstractFiles = []
        this.tempFiles = []
        this.handleFileSelect = (files) => {
            const builds = this.buildFiles([...files])
            if (preview){
                this.abstractFiles.push(...builds);
                this.tempFiles = [...builds]
                this.createUploadPreview()
            }
            handleFileSelect(builds)
        };
        this.options = args || {};
        this.styleId = this.options?.styleId || 'uploader-abstract-template-style-id';
        this.checkUploaderContainer();
        this.checkStyle();
        this.setupEventListeners();
    }
    /**
     * 上传器容器id
     */
    static uploaderContainerId = 'file-uploader-container'

    /**
     * input id
     * @type {string}
     */
    static uploaderInputId = 'file-uploader-input'

    /**
     * 清除input
     * @type {string}
     */
    clearInput(){
        const input = document.querySelector(`#${AbstractTemplate.uploaderInputId}`)
        if (input){
            input.value = '';
        }
    }
    /**
     * 上传器容器
     */
    checkUploaderContainer () {
        const exits = document.querySelector(`#${AbstractTemplate.uploaderContainerId}`)
        if (!exits){
            this.createUploader();
        }
    }
    /**
     * 创建上传器
     */
    createUploader () {
        throw new Error('createUploader 方法必须被重写');
    }
    /**
     * 检查样式
     */
    checkStyle(){
        const exits = document.querySelector(`#${this.styleId}`)
        if (!exits){
            this.initStyles(this.styleId);
        }
    }
    /**
     * 初始化样式
     * @param styleId 样式id
     */
    initStyles (styleId) {
        throw new Error('initStyles 方法必须被重写');
    }
    /**
     * 事件监听
     */
    setupEventListeners () {
        throw new Error('setupEventListeners 方法必须被重写');
    }
    createUploadPreview(){
    }
    updateProgress(uuid, percentage){}

    /**
     * 构建文件对象
     * @param files
     * @returns {*}
     */
    buildFiles(files){
        return files.map(file => {
            file.uuid = Math.random().toString(36).substr(2, 9);
            file.progress = 0;
            return file;
        })
    }
}