JS原生之文件上传系列（单文件上传_基于BASE64）

最新推荐文章于 2023-07-22 08:00:00 发布

SKMA

最新推荐文章于 2023-07-22 08:00:00 发布

阅读量462

点赞数

文章标签： javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/Sk22582/article/details/129566613

版权

该代码段展示了一个基于JavaScript的文件上传功能，利用FileReader接口将选中的文件转换为BASE64编码，然后通过POST请求发送到服务器。文件大小限制为2MB，上传成功后会显示服务路径。在上传过程中，按钮会显示加载状态，上传失败则显示错误信息。

摘要由CSDN通过智能技术生成

第二节：使用BASE64实现单文件上传，

/* 基于BASE64实现文件上传 */
(function () {
    let upload = document.querySelector('#upload2'),
        upload_inp = upload.querySelector('.upload_inp'),
        upload_button_select = upload.querySelector('.upload_button.select');

    // 验证是否处于可操作性状态
    const checkIsDisable = element => {
        let classList = element.classList;
        return classList.contains('disable') || classList.contains('loading');
    };

    // 把选择的文件读取成为BASE64
    const changeBASE64 = file => {
        return new Promise(resolve => {
            //fileReader是基于js内置的实例
            let fileReader = new FileReader();
            fileReader.readAsDataURL(file);
            fileReader.onload = ev => {
                resolve(ev.target.result);
            };
        });
    };

    upload_inp.addEventListener('change', async function () {
        let file = upload_inp.files[0],
            BASE64,
            data;
        if (!file) return;
        if (file.size > 2 * 1024 * 1024) {
            alert('上传的文件不能超过2MB~~');
            return;
        }
        upload_button_select.classList.add('loading');
        BASE64 = await changeBASE64(file);
        try {
            data = await instance.post('/upload_single_base64', {
                //通过encodeURIComponent加密，后台需要通过decodeURIComponent解密
                file: encodeURIComponent(BASE64),
                filename: file.name
            }, {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            });
            if (+data.code === 0) {
                alert(`恭喜您，文件上传成功，您可以基于 ${data.servicePath} 地址去访问~~`);
                return;
            }
            //抛出一个异常
            throw data.codeText;
        } catch (err) {
            alert('很遗憾，文件上传失败，请您稍后再试~~');
        } finally {
            upload_button_select.classList.remove('loading');
        }
    });
    upload_button_select.addEventListener('click', function () {
        if (checkIsDisable(this)) return;
        upload_inp.click();
    });
})();