前端通过axios和FormData实现文件上传功能遇到的坑

最新推荐文章于 2024-02-20 17:02:10 发布
最新推荐文章于 2024-02-20 17:02:10 发布
阅读量1.2w 收藏 31
点赞数 7
文章标签： 前端 postman 移动开发 ViewUI
原文链接：https://segmentfault.com/a/1190000016927601
版权

axios文件上传的坑

基本的axios配置这里就不讲了。首先要确认后台的接口是否正常：用postman进行文件上传，如果文件能够上传成功，剩下的就是前端问题了，否则就先用postman将后台接口测通先。很难受这篇文章的结论是：自己的代码坑了自己

1. 文件上传时候，服务器报500错误

首先确认：通过formData上传，不用考虑enctype，axios发送请求，嗯，后台还要是通的
正常来说文件上传的时候，都是需要修改请求的Content-Type，修改为multipart/form-data来实现文件上传的功能
但是现在很神奇的报了个500错误

clipboard.png

看到报错之后，上网找了一大堆资料（重复内容一大堆，还一堆没有用的内容。。。） 还是没有解决问题。

1.1 网上的解决办法

网上的一种说法：axios配置不纯净，需要自己手动创建一个axios请求。
但是创建了之后发现请求头一直都是application/x-www-form-urlencoded（axios源码中，如果没有设置请求头的时候，axios会默认设置这个Content-Type），会导致文件没有办法上传，或者是上传之后文件是null的。

最低0.47元/天 解锁文章
weixin_34413802
关注
  • 7
    点赞
  • 踩
  • 31
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
axios post提交formdata的实例
11-29
vue框架推荐使用axios来发送ajax请求，之前我还写过一篇博客来讲解如何在vue组件中使用axios。但之前做着玩用的都是get请求，现在我自己搭博客时使用了post方法，结果发现后台（node.js）完全拿不到前台传来的参数。后来进过一番探索，终于发现问题所在。 post提交数据的四种编码方式 1.application/x-www-form-urlencoded 这应该是最常见的post编码方式，一般的表单提交默认以此方式提交。大部分服务器语言对这种方式都有很好的支持。在PHP中，可以用$_POST[“key”]的方式获取到key的值，在node中我们可以使用querystring
Vue中使用Axios发送FormData请求
牛肉胡辣汤
05-30 1317
通过使用Axios和FormData组合，我们可以在Vue项目中轻松发送包含文件或表单数据的请求。Axios提供了简单而强大的API来处理HTTP请求，而FormData提供了用于构建表单数据的API。这使得在Vue中实现文件上传和表单提交等功能变得非常容易。
基于axios封装之后的上传文件，传参为空
qq_44701537的博客
12-31 3154
基于axios封装之后的上传文件，传参为空 最近做项目时，发现了一个问题。封装axios的请求和返回拦截之后，上传文件的上传参数莫名其妙为空对象了。本人是菜鸟只能用不进行封装的axios进行上传文件 封装的 export function fileUpload(url, params) { const fileObject = params.file; const formData = new FormData(); formData.append('file', fileObject);
Axios formData boundry缺失
qq_42449322的博客
05-20 521
Axios formData boundry
FormData多个文件上传（fileList集合）
Xiaochen1239的博客
02-20 2576
filename="新建文本文档.txt" Content-Type: text/plain ------WebKitFormBoundaryqko4onsawDOCCtSk--------当jquery上传的时候将contentType设置成了formdata的时候出现。最后看看上传控制台的样子吧。
JS FormData上传文件的设置方法
12-08
在JavaScript中，`FormData` 对象是一个非常实用的工具，尤其在处理文件上传到服务器时。`FormData` 可以让我们方便地构建一个包含键值对的数据结构，这些键值对可以是普通的文本数据，也可以是文件。在这个场景中，...
SpringBoot+Vue.js实现前后端分离的文件上传功能
11-01
本教程将聚焦于如何利用SpringBoot后端框架与Vue.js前端框架，实现一个高效的文件上传功能，特别是针对大文件上传的场景。我们将深入探讨以下几个核心知识点： 1. **SpringBoot后端处理**： - **MultipartFile接口...
前端Jquery，Vue通过授权URL直传阿里云OSS
11-16
本文将详细介绍如何使用Jquery和Vue.js这两个前端库，结合阿里云OSS提供的API，实现通过授权URL进行文件的直传。 首先，让我们了解下阿里云OSS。对象存储服务（OSS）是阿里云提供的一种海量、安全、低成本、高可靠...
17axios踩坑笔记1
08-08
在前端开发中，数据传输是不可或缺的一环，尤其是在使用axios进行HTTP请求时，可能会遇到一些坑。这篇笔记主要探讨了如何解决前端以JSON格式发送数据，而后端无法接收到的问题。 首先，问题的核心在于前端发送的...
axios-0.15.2.zip
最新发布
06-10
9. **文件上传**：Axios 支持通过FormData对象上传文件，同时可以设置额外的表单数据。 10. **错误处理**：Axios 将所有网络错误和服务器返回的非2xx状态码视为错误，方便统一处理。 在开发过程中，你可能遇到的...
axios 封装上传文件的请求方法
10-17
今天小编就为大家分享一篇axios 封装上传文件的请求方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中使用axios上传文件（踩坑）
weixin_45925443的博客
10-04 1475
axios上传文件，服务端接收数据为空， 客户端报错： Error: Request failed with status code 400
FromData()；解析与实践，axios / ajax多文件上传data配置，初级程序员必看
潜心
10-18 833
在不清楚问题原因之前，要沉着分析，实在没有头绪，来百度看看，说不定就解决了，没有头绪是因为我们积累不充分，经验不充分，困难真的是我们前进的阶梯。这个对象的方法和兼容性我就不做解释了，自己点击文末链接前往。
axios以form-data形式的传递参数遇到的坑
Jason_Maron的博客
08-04 731
axios默认的Content-type是application/json;charset=UTF-8，如果想要以表单的形式传递参数，只要修改{headers:{'Content-Type':'application/x-www-form-urlencoded'}}配置即可。 axios.post(url,{jobNumber: '430525', password: '123'}, {headers: {'Content-Type':'application/x-www-form-urlencoded
【爬坑日记】利用axios进行post提交formdata
weixin_34362790的博客
07-04 1058
近期在利用axios向后台传数据时，axios默认传的是用application/json格式，若后台需要的数据格式为key/value格式，可以在axios的config中进行配置，也可以用qs.stringify()方法进行转换 注：若用原生的<form>标签对后台进行post传输数据，默认即为key/value格式 关于encodeURI()、encodeURICo...
FormData兼容性踩坑
Michael Zhan的博客
05-24 1850
iOS端浙政钉FormData兼容性问题
Vue axios 发送 FormData 请求
热门推荐
卡尔特斯
02-22 2万+
一、简介 axios 默认是 Payload 格式数据请求，但有时候后端接收参数要求必须是 Form Data 格式的，所以我们就得进行转换。 Payload 和 Form Data 的主要设置是根据请求头的 Content-Type 的值来的： Payload： Content-Type: 'application/json; charset=utf-8' Form Data： Content-Type: 'application/x-www-form-urlencoded' Conten
axios formdata上传文件
06-28
### 回答1： axios可以通过FormData对象上传文件，具体步骤如下： 1. 创建FormData对象 ``` const formData = new FormData(); ``` 2. 添加文件到FormData对象中 ``` formData.append('file', file); ``` 其中，'file'是上传文件的字段名，file是要上传的文件对象。 3. 发送请求 ``` axios.post('/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(response => { console.log(response); }).catch(error => { console.log(error); }); ``` 其中，'/upload'是上传文件的接口地址，headers中的'Content-Type'必须设置为'multipart/form-data'，否则服务器无法正确解析上传的文件。 以上就是使用axios上传文件的基本步骤。 ### 回答2： axios是现在使用最为广泛的HTTP客户端请求库，提供了方便易用的API，使用axios可以方便的进行数据的获取和提交，而且还支持跨域请求和CSRF攻击保护。 但是在上传文件时，需要使用FormData类型的数据格式进行提交，axios也提供了很好的支持。下面我们来介绍一下axios如何上传FormData类型的数据。 1. 首先需要创建FormData对象，将要上传的参数和文件添加到FormData中。 ``` let formData = new FormData(); formData.append('name', 'axios_upload_file'); // 添加普通参数 formData.append('file', file); // 添加要上传的文件 ``` 2. 创建axios实例，设置请求的参数，包括请求的URL、请求的方式、请求的数据等。需要注意的是，设置Content-Type为'multipart/form-data'，这样后端服务才能正确解析请求的参数和文件。 ``` const instance = axios.create({ baseURL: 'http://localhost:3000', // 设置请求的baseURL timeout: 10000, // 设置请求的超时时间 headers: {'Content-Type': 'multipart/form-data'} // 设置请求头类型为form-data }); ``` 3. 使用axios实例发送请求，可以使用post或者put请求。传递FormData对象作为第二个参数。需要注意的是，不需要手动设置请求头中的Content-Type和Content-Length参数，axios会自动设置这些参数。 ``` instance.post('/upload', formData).then(res => { console.log(res); }).catch(err => { console.error(err); }) ``` 4. 接收后台返回的数据。使用then和catch方法异步处理后台返回的数据。 ``` .then(res => { console.log(res.data); }).catch(err => { console.error(err); }) ``` 以上就是使用axios上传FormData类型的文件的步骤和注意事项了。我们需要注意，上传文件时，需要在服务端配置文件的接收处理逻辑，一般情况下需要使用multer库或其他类似的中间件，来实现文件上传相关功能。 ### 回答3： Axios是一个非常流行的JavaScript库，主要用于向服务器发起HTTP请求和处理响应。Axios支持各种HTTP请求和响应类型，包括文件上传和下载。 File Upload FormData（表单数据）是一种简单易用的方法来上传文件。FormData对象允许我们在发送XMLHttpRequest请求时添加文件以及其他类型的数据。 以下是使用Axios实现文件上传的基本步骤： 1. 创建一个FormData对象。 ``` var formData = new FormData(); ``` 2. 将要上传的文件添加到FormData对象中。 ``` formData.append('file', file); ``` 3. 发送Ajax请求，使用Axios发送FormData对象。 ``` axios.post('/url', formData, { headers: { 'Content-Type': 'multipart/form-data' } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); ``` 在这个请求中，我们使用“POST”HTTP方法提交FormData对象，其中包含我们要上传的文件。我们还指定了Content-Type头文件类型为“multipart/form-data”。 如果文件上传成功，我们将在响应中获得服务器返回的结果。如果出现错误，我们可以通过捕获Axios Promise中的错误来进行处理。 总结：使用Axios上传文件的方式非常简单，只需要创建一个FormData对象，把要上传的文件添加到FormData对象中，然后使用Axios发送Ajax请求即可。Axios可以处理各种HTTP请求和响应类型，因此它是处理文件上传的绝佳工具。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值