XMLHttpRequest上传文件

最新推荐文章于 2024-08-27 11:22:49 发布

略略大魔王丶

最新推荐文章于 2024-08-27 11:22:49 发布

阅读量1.8k

点赞数 4

分类专栏：前端文章标签：小程序 javascript vue

本文链接：https://blog.csdn.net/LueLueLue77/article/details/124584516

版权

H5 文件上传 XMLHttpRequest FormData POST请求

关键词由CSDN通过智能技术生成

前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

最近有个小需求是在H5上传文件，虽然很简单；还是记录下我用 XMLHttpRequest 来上传文件的操作。

实现很简单 - 直接上代码

/** 处理上传成功后 */
const handleAfterUpload = (file) => {
    // 将file文件设置成form数据
    const fileForm = new FormData();
    fileForm.append("file", file.file);

    // 这里暂时用token模拟下
    const token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJvcGVuSWQiOiIxMjM0NTYiLCJzdG9yZUlkIjowLCJ0eXBlIjowLCJleHAiOjE2NTE4MDQzNTUsInVzZXJJZCI6MSwiaWF0IjoxNjUxNzE3OTU1fQ.exWw_qBjsGFO-7sk6BFPQEpka5vxl3Vrldim32B-vRw';

    // 创建XMLHttpRequest对象
    const xhr = new XMLHttpRequest();
    // 设置请求方式以及路径
    xhr.open("POST", '上传路径');
    // 这边上传需要通过token验证 所以在请求头设置token
    xhr.setRequestHeader("token", token);
    // 发送请求
    xhr.send(fileForm);
    // 监听请求的结果
    xhr.addEventListener("load", () => {
        const response = JSON.parse(xhr.response);
        console.log(response)
    });
}

这边的请求头需要用到在设置，没有其他要求就使用默认的！！！