axios上传文件接收不到,vue使用axios 发送post请求的四种方法
本文主要介绍如何使用axios发送post请求上传文件到后端(multipart/form-data)。本文为您带来了问题的原因和解决方案。它用一个示例代码非常详细地介绍给你。有需要的朋友可以参考一下。
目录
项目场景：问题描述原因分析：解决方案：
项目场景：
后端:实现了一个文件上传服务接口，可以从前端接收多文件文件，并本地存储在服务器中。前端:用type file获取font标签中的文件，使用axioshttp请求库，发送post请求，将文件发送到后端。
问题描述
在js中发送上传文件请求的一般代码如下：
新的FormData对象，它使用append方法向表单添加文件。FormData在js中专门用于发送多部分/表单数据格式请求。append方法的关键是形式上的name属性，即参数名async handleUploadFile(event) {
const file=event . target . files[0]
假设formData=新表单数据()
formData.append(files ，file)
const res=await service({
URL:“/API/files/upload”，
方法： POST ，
标题：{
“内容类型”:“多部分/形式数据”
},
数据：表单数据
})
console . log(RES . data)；
}
当您实际运行上面的代码时，您会发现后端报告500错误如下：
原因：java.io.IOException:
请求被拒绝，因为没有找到多部分边界
大概是指后端无法识别传输文件中的边界，所以无法分辨一个文件的内容在消息中的起止位置，最终导致文件上传失败。
原因分析：
出现上述情况的原因是，当我发送请求时，我将请求头中的Content-Type属性写入multipart/form-data，浏览器无法自动给我们的报文添加boundary。
我尝试从前端请求配置中删除标头配置，如下所示：
异步handleUploadFile(事件){
const file=event . target . files[0]
假设formData=新表单数据()
formData.append(files ，file)
const res=await service({
URL:“/API/files/upload”，
方法： POST ，
数据：表单数据
})
console . log(RES . data)；
}
再次发送请求。这一次，请求仍然没有成功。服务器未报告错误，但后端无法获取文件数据。继续分析请求消息，发现属性值更改为application/x-www-form-urlencoded。这是一个普通的表格，肯定是无法正确传递文件的。
解决方案：
在查阅了大量网上的帖子后，我们知道axios会在发出请求前拦截请求，并自动为我们的请求设置一些参数。application/x-www-form-urlencoded参数出现在上面，因为axios已经为post请求设置了默认的请求头。如果我们没有在config中指定其他请求头，我们将使用默认的请求头。
我们还了解到，当以multipart/form-data格式发送请求时，我们不需要自己指定Content-Type属性，浏览器会自动帮助我们设置它。
那么解决问题的关键就是不让axios帮我们自动配置
Axios的配置中有一个transformRequest属性。官方的解释是，在请求发出之前，我们可以手动干预。属性值是一个数组，您可以在其中定义一个函数并接收两个参数，即数据和头。数据是我们刚刚定义的FormData对象，头是axios预定义的请求头。
打印标题：
删除post属性中的Content-Type属性来解决问题。
最终代码如下：
异步handleUploadFile(事件){
const file=event . target . files[0]
假设formData=新表单数据()
formData.append(files ，file)
const res=await service({
URL:“/API/files/upload”，
方法： POST ，
transform request:[function(data，headers) {
//删除post请求的默认内容类型
删除headers.post[Content-Type]
返回数据
}],
数据：表单数据
})
console . log(RES . data)；
}
上面的解决方案是我不断试错后得到的。网上很多关于这个问题的帖子都解决不了，让我很生气。希望这个帖子能帮你避免踩这个坑~
关于如何使用axios将文件上传到后端(多部分/表单数据)的文章到此结束。有关axios发送post请求以上传文件的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。