文件上传

上传封装

import {setAttributes} from "@/utils/index";
import {message} from "@/utils/message";
import {$t} from "@/plugins/i18n";

type FileOptions = {
    isMultiple?: boolean;
    isDirectory?: boolean;
    accept?: string;
    maxSize?: number;
};

export function selectFiles(options: FileOptions): Promise<FileList> {
    return new Promise<FileList>((resolve, reject) => {
        const input = document.createElement("input");
        let props = {
            type: "file",
            style: {
                display: "none"
            }
        };

        function setProps(
            props: any,
            isMultiple: boolean,
            isDirectory: boolean,
            accept: string
        ) {
            props["accept"] = accept;
            if (isMultiple) {
                props["multiple"] = "multiple";
            }
            if (isDirectory) {
                props["webkitdirectory"] = "webkitdirectory";
                props["mozdirectory"] = "mozdirectory";
                props["odirectory"] = "odirectory";
            }
        }

        const {
            isMultiple = false,
            isDirectory = false,
            accept = "*/*",
            maxSize
        } = options;
        setProps(props, isMultiple, isDirectory, accept);
        setAttributes(input, props);
        input.click();
        let fileCancel = true;
        window.addEventListener(
            "focus",
            () => {
                setTimeout(() => {
                    if (fileCancel) {
                        input.remove();
                    }
                });
            },
            {once: true}
        );
        input.addEventListener("change", (ev: Event) => {
            fileCancel = false;
            // TODO  isDirectory 为true时，accept属性无效，这里需遍历文件夹下的文件，判断是否符合accept条件，暂不处理。
            const result = (ev.target as HTMLInputElement).files;
            if (maxSize) {
                const overSize = Array.from(result).some(file => file.size > maxSize);
                if (overSize) {
                    message($t("message.wjdxcc"), {
                        type: "warning"
                    });
                    reject(new Error($t("message.wjdxcc")));
                }
            }
            resolve(result);
            input.remove();
        });
    });
}