js实现自定义唤起文件选择窗口获取文件

代码：
 

/**
 * 唤起文件选择窗口，并获取选择的文件
 * @param {*} multiple // 是否支持多选
 * @param {*} accept // 文件上传格式限制
 * @param {*} limit // 单次上传最大数
 * @param {*} fileSize // 单次上传最大数
 * @returns
 */
export async function getWinFiles (options) {
    const { multiple, accept, limit, fileSize, dropzone } = {
        multiple: true,
        accept: '',
        limit: 1,
        fileSize: 500,
        ...options,
    }

    // 创建文件选择元素
    const input = document.createElement('input')
    input.setAttribute('type', 'file')
    input.setAttribute('style', 'display:none')
    input.setAttribute('multiple', multiple)
    input.setAttribute('accept', accept)
    input.setAttribute('dropzone', dropzone)
    // 将文件选择元素添加到文档中
    document.body.appendChild(input)

    // 触发文件选择元素的点击事件
    input.click()

    // 等待文件选择元素的change事件
    const files = await new Promise((resolve, reject) => {
        input.addEventListener('change', e => {
            const files = Object.values(e.target.files) || []

            // 从文档中移除文件选择元素
            document.body.removeChild(input)

            // 判断是否超出上传数量限制
            if (files.length > limit) {
                reject({ errorType: 'limit', files })
                return
            }

            // 判断是否超出上传文件大小限制
            if (files.some(i => i.size / 1024 ** 2 > fileSize)) {
                reject({ errorType: 'fileSize', files })
                return
            }
            // 抛出附件，并生成附件uid
            resolve(files.map((file, index) => ({ file, uid: Date.now() + index })))
        })
    })

    return files
}

使用方法：
 

/* 点击获取文件 */
async function getFiles(accept, fileSize) {
        const files = await getWinFiles({ limit, accept, fileSize }).catch(error => {console.log(error,'获取错误截获！')})
    console.log(files,'获取到文件了！')
}