fetch 文件上传

最新推荐文章于 2025-05-22 08:00:00 发布

原创最新推荐文章于 2025-05-22 08:00:00 发布 · 558 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

废话就免了，直接上代码！！

<input type="file" name="file" id="" value="">
        <button onclick="fn()">提交</button>

之前项目在做5w数据导入文件但是单纯的使用html form表单请求不理想

下面代码展示：

let file = document.getElementById("file").files[0]
        const formData = new FormData()
        formData.append("file", file)
        const options = {
            method: 'POST', // 指定请求方法
            headers: {
                // 'Content-Type': 'multipart/form-data', // 设置内容类型 
                'token': `wo shi token` // 添加token到header
            },
            body: formData 
        }
        // 发起请求
        fetch(url.href)
            .then(response => response.json())
            .then(response => {
                console.log(response);
            })
            .catch(error => {
                console.error('Error fetching data: ', error);
            });

'Content-Type': 'multipart/form-data' 这个类型一般需要设置，但是现代的浏览器会自动解析，如果自己添加反而不知道解析的格式数据类型，也就会报错，哎-无奈！因此直接注释掉就可以了。