js文件上传 XHR封装文件上传，文件选择

js文件上传 XHR封装文件上传，文件选择

函数使用：

async function up() {
            uploadFile({
                url: 'http://hc.**.**.com.cn/hechuan/hechuan/sj/upload/content?title=3',
                headers: {
                    Authorization: "eyJhbGciqsBQ"
                },
                input: {
                    accept: '.docx',
                    multiple: false
                }
            }).then(msg=>{
                alert(msg)
            })
        }

函数代码如下：

 /**
         * 
         * option = {url,headers}
         * getDataFn 函数 函数返回值当作发送到服务器的数据 params = {file}
         */
        async function uploadFile(option, getDataFn) {
            // 获取文件
            function getFile(input_config) {
                return new Promise((res, rej) => {
                    var input = document.createElement('input');
                    input.type = 'file';
                    Object.assign(input, input_config);
                    input.onchange = function (event) {
                        var selectedFile = event.target.files[0];
                        console.log(selectedFile)
                        res({
                            file: selectedFile
                        })
                        // 处理选中的文件
                    };
                    input.click();
                })
            }

            function upFile(option, data,callback) {
                const { url, headers = {} } = option;
                const xhr = new XMLHttpRequest();

                // 装载data
                const formData = new FormData();
                for (const key in data) {
                    formData.append(key, data[key])
                }

                xhr.open('POST', url)

                // 设置请求头
                for (const key in headers) {
                    xhr.setRequestHeader(key, headers[key])
                }
                xhr.timeout = 3000
                xhr.ontimeout =()=> callback.rej('请求超时')
                xhr.onerror =()=> callback.rej('请求错误')
                xhr.onload =()=> callback.res('请求成功')
                console.log('sss')
                xhr.send(formData);
            }


            const { url, headers, input } = option;
            const res = await getFile(input);
            const data = getDataFn?.(res) ?? { file: res.file }
            return new Promise((res, rej) => {
                upFile({ url, headers }, data, {rej,res})
            })
        }