FormData传参数axios请求

最新推荐文章于 2024-07-23 16:15:54 发布

安与不安

最新推荐文章于 2024-07-23 16:15:54 发布

阅读量1.9k

点赞数 3

文章标签：前端

本文链接：https://blog.csdn.net/weixin_46031192/article/details/124194306

版权

在前端项目中，遇到一个接口调用时回显数据异常的问题。尽管常规axios请求能正常调通，但数据显示不正确。经后端提醒，需使用FormData传递参数。通过创建FormData实例，用append方法添加参数，最后用Axios发送请求，成功解决了回显问题。

摘要由CSDN通过智能技术生成

我写的是一个后台的项目，当时后端给我一个接口让我调，我用平常的封装好的axios去掉接口传参都正常接口也能调通就是回显没数据，我通过浏览器去看携带的参数也都正常，为什么不回显数据，就找后端小伙伴问了一下说需要用FormData传递，就这样用FormData回显了，废话不多说上代码！！！！！

第一步首先需要创建一个FormData实例对象

var formData = new FormData();

第二步把需要的参数以append方法放到FormData对象中

//第一个值是key,第二个是value
formData.append(

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

安与不安

关注关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

axios get 请求发送 FormData 数据

u013992330的博客

07-10

616

axios是一个流行的基于Promise的HTTP客户端库，用于浏览器和Node.js环境中。如果你想在axios发起GET请求时发送FormData数据，通常会在`axios.get()`方法中设置`params`或`data`属性。headers: {'Content-Type': 'application/x-www-form-urlencoded'} // 设置正确的content-type。params: formData, // 将FormData作为查询参数传递。

Vue 设置axios请求格式为form-data的操作步骤

12-13

Cover 在Vue中使用axios 这个老生常谈了，还是先记录一遍，方面后面自己查。 !!! 设置form-data请求格式直接翻到后面看。 1. 安装axios 在项目下执行npm install axios。之后在main.js中，添加： import axios from 'axios' //引入 //Vue.use(axios) axios不能用use 只能修改原型链 Vue.prototype.$axios = axios 2. 发送GET请求 axios封装了get方法，传入请求地址和请求参数，就可以了，同样支持Promise。 //不带参数的get请求 let url

参与评论您还未登录，请先登录后发表或查看评论

Axios 通过 FormData 上传文件

最新发布

csdnzhaoxiaosheng的博客

07-23

367

Axios 通过 FormData 上传文件

axios 使用FormData格式发送GET请求

pig_ning的博客

08-29

2273

axios 使用FormData格式发送GET请求

axios get携带数组请求 post form-data请求数组请求

qq_43345846的博客

05-25

1541

注：默认已经install与引入qs 1.POST 一 .json请求，那么就不需要修改什么。二.form-data或x-www-form-urlencoded请求：可以在发送请求的时候加上： this.axios({ url:'请求地址', method:'post', data: {'key':'值'}, transformRequest: [data => { return this.qs.stringify(data) }] }) 或者可以

Vue使用axios，设置axios请求格式为form-data

达拉崩巴斑得贝迪卜多比鲁翁_

07-01

3177

Vue使用axios，设置axios请求格式为form-data 这个老生常谈了，还是先记录一遍，方面后面自己查。 !!! 设置form-data请求格式直接翻到后面看。 1. 安装axios 在项目下执行npm install axios。之后在main.js中，添加： import axios from 'axios' //引入 //Vue.use(axios) axios不能用use 只能修改原型链 Vue.prototype.$axios = axios 2. 发送GET请求 axios封

axios 封装请求 form-data

qq_34631220的博客

04-23

4000

import axios from 'axios'; var myaxios = {}; var aass = {}; myaxios.install = function(Vue){ var axios_obj = axios.create({ baseURL: 'http://dadeapi.xxll.top:9501', }) function onGetCall(config) { return config.method === 'get'.

axios 实现post请求时把对象obj数据转为formdata

10-16

它接收一个参数`data`，返回值会被axios作为请求体发送。`headers`对象中的`Content-Type`应设置为`application/x-www-form-urlencoded`，这样服务器才能知道接收到的数据是form-data格式。下面是一个完整的代码...

axios使用FormData 发送post请求

crushh_fun的博客

11-03

6614

预备知识： post提交数据的四种编码方式 1.application/x-www-form-urlencoded 传表单格式键值对。 2.multipart/form-data 能传文件，不仅仅是表单数据这也是一种比较常见的post数据格式，我们用表单上传文件时，必须使form表单的enctype属性或者ajax的contentType参数等于multipart/form-data。使用这种...

13 使用Vue + FormData + axios实现图片上传功能实战

热门推荐

xingyu_qie的专栏

06-21

1万+

文本通过Vue实例项目，使用axios + FormData实现图片上传做为例子，为下一节图书信息上传做准备

axios文件上传 formdata_vue使用axios上传文件(FormData)的方法

weixin_39607710的博客

12-21

1127

在此主要介绍如何使用 formData 对象上传单文件和多文件，FormData 就是 XMLHttpRequest Level 2 新增的一个对象，利用它来提交表单、模拟表单提交，当然最大的优势就是可以上传二进制文件。过多介绍不说，过多的煽情语句不说，直接来来干活，希望对广大博友有所帮助。也希望各位大神不吝赐教1.前台上传文件的表单和响应函数提交表单可以根据自己需要选择合适的表单，我在此选用的...

vue axios form-data格式传输数据和文件

block_xu的博客

09-09

8663

vue axios form-data格式传输数据和文件 form-data在post请求下的一种传输方式，数据会在Form Data中传输，传输的数据由boundary来分割 ------WebKitFormBoundaryRO0YA4pq9oCgwTkt Content-Disposition: form-data; name="id" undefined ------WebKitFormBoundaryRO0YA4pq9oCgwTkt Content-Disposition: form-data;

设置axios为form-data

weixin_48210599的博客

07-01

503

设置axios为form-data headers:{'Content-Type':'application/x-www-form-urlencoded'}, transformRequest:[function (data) { let ret = '' for (let it in data) { ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&' }

vue中 axios get请求,使用formData传递参数给后台

weixin_44168929的博客

10-13

2513

简单记录一下axios get请求,使用formData传递参数给后台。// GET 请求传递 formData。POST 请求传递 formData。

axios以FormData传参数交互

persist_in1的博客

05-12

123

<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="htt...

使用axios封装http，Form Data格式入参

sxww_zyt的博客

02-13

483

ajax包含axios，但ajax不止axios！本篇介绍了axios，使用axios封装用于实际需求的http。共勉！

antd中form表单以formData格式axios请求接口入参

不才的博客

11-12

2522

antd的form组件中不支持enctype，所以不用设置； axios的Content-Type也不需要设置，等于false就好； form.validateFieldsAndScroll((err, data) => { data.file && data.file.map(item => data.file = item.originFileObj); // ...

axios Form Data传参

六国破灭，非兵不利，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百

01-21

1965

axios 有两种传参格式，一种是json字符串，另外一种就是Form Data传参了引入后qs.stringify( ） import axios from 'axios'; import qs from 'qs'; //获取后台数据 getDataList(){ let data = { pageNum: 1, pageSize: 100...

axios post请求传参数

05-11

在使用axios进行POST请求时，可以通过以下方式传递参数： 1. 通过URLSearchParams对象传递参数 ```javascript import axios from 'axios' const params = new URLSearchParams() params.append('name', 'John') params.append('age', 30) axios.post('/api/user', params) .then(response => { console.log(response.data) }) .catch(error => { console.log(error) }) ``` 2. 通过普通对象传递参数 ```javascript import axios from 'axios' const data = { name: 'John', age: 30 } axios.post('/api/user', data) .then(response => { console.log(response.data) }) .catch(error => { console.log(error) }) ``` 3. 通过FormData对象传递参数 ```javascript import axios from 'axios' const formData = new FormData() formData.append('name', 'John') formData.append('age', 30) axios.post('/api/user', formData) .then(response => { console.log(response.data) }) .catch(error => { console.log(error) }) ``` 以上三种方式都可以传递参数，具体选择哪种方式取决于应用场景和参数类型。