axios&jquery -上传本地文件

最新推荐文章于 2024-12-19 10:48:45 发布

原创最新推荐文章于 2024-12-19 10:48:45 发布 · 571 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #jquery

收录于

javascript 同时被 2 个专栏收录

6 篇文章

订阅专栏

文件上传

1 篇文章

订阅专栏

本文详细介绍了使用axios和ajax进行文件上传的方法，包括如何将文件转化为formData格式，设置正确的Content-Type，以及处理服务器响应。同时，文章还提供了具体的代码示例，帮助读者快速上手。

1、axios

上传的是二进制文件
需要设置传输类型（form-data）
注意服务器接受的文件格式

// html
<input type='file'/>

//js
let fileObj = document.getElementById("file").files[0]
let formData = new FormData()
    formData.append('file', fileObj)
axios.post('/uploadfile', formData, {
    headers: {
        'Content-Type': 'multipart/form-data' 
    }
}).then(res => {
    let filePath = res.filepath;
    console.log('服务器返回的文件路径:', filePath)
}).catch(err => {
    alert(err)
});

2、ajax

let fileObj = document.getElementById("file").files[0]
let formData = new FormData();
    formData.append('file', fileObj);
$.ajax({
    url: '/uploadfile',
    dataType: 'json',
    type: 'post',
    data: formData,
    processData: false,
    contentType: false,
    success: (res) => {
        console.log('success:', res)
    },
    error: (res) =>  {
        console.err('error:', res)
    }
})