js 自定义图片上传

 转载于：选择文件的js方法 - 蛙仔 - 博客园

let fileInputEle;
let fileInputHandlerDefer = {};

// 选择文件
export const getFile = (limitTypes, multiple) => {

    // 创建 input 节点
    fileInputEle = document.createElement("input");
    // 将 input 类型改为文件 type = file
    fileInputEle.setAttribute("type", "file");
    // 不显示
    fileInputEle.style.display = "none";
    // 内容改变事件
    fileInputEle.addEventListener("change", () => {
        if (fileInputEle.files && fileInputEle.files.length) {
            // multiple ：true 可以多图片上传, false 单图片上传
            if (multiple) {
                fileInputHandlerDefer.resolve(fileInputEle.files);
            } else {
                fileInputHandlerDefer.resolve(fileInputEle.files[0]);
            }
        } else {
            fileInputHandlerDefer.reject();
        }
    });

    // 重置 multiple, accept 属性
    fileInputEle.removeAttribute("multiple");
    fileInputEle.removeAttribute("accept");
    fileInputEle.value = "";
    if (multiple) {
        fileInputEle.setAttribute("multiple", "multiple");
    }
    // 设置上传图片约束
    if (limitTypes && limitTypes.length) {

        fileInputEle.setAttribute(
            "accept",
            limitTypes.map(one => (`.${one}`)).join(",")
        );
    }
    return new Promise((resolve, reject) => {
        fileInputHandlerDefer.resolve = resolve;
        fileInputHandlerDefer.reject = reject;
        fileInputEle.click();
    });
};

测试

getFile(['jpg','png'], false).then((files) => {
    console.log(files)
})