使用axios请求时,发送formData请求的示例

最近做的一个项目中有一个特例接口，传json后端接收不到，对接的后端又不愿意改接口，只能用formData方式传参，由于好多年没有用过formData，头痛了一会，找到了解决方法，发现非常简单，在此做个笔记！

var formData = new FormData();
formData.append("username", "Groucho");
formData.append("accountnum", 123456);
fetch('/users', {
 method: 'POST',
 body: formData
})

对象转FormData对象

对于FormDat对象，像上面那种形式可以直接添加参数比较方便，但是对于对象或者嵌套对象：

let userObj = {userName: 'xxx', age: '21'}
formData.append('user', userObj)

如果已经有了一个对象，里边字段非常多的话，可以这样：

let param {{name:"张三"},{aa:"222"}}<br>let formData = new FormData(); <br>Object.keys(param).forEach(key => { <br>　　formData.append(key, param[key]); <br>});

该问题方案解决方法来自于https://www.jb51.net/article/173081.htm

以上这篇使用axios请求时,发送formData请求的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用axios发送post请求,将JSON数据改为form类型的示例

    通常前端通过POST请求向服务器端提交数据格式有4中,分别是"application/x-www-form-urlencoded"格式." multipart/form-data"格式."application/json"格式和"text/xml"格式.通常最常见的是"application/json"格式,也就是通过JSON字符串形式. 在控制台看到的数据就是这样: 有的时候后台需要Form形式的数据才能

  • axios post提交formdata的实例

    vue框架推荐使用axios来发送ajax请求,之前我还写过一篇博客来讲解如何在vue组件中使用axios.但之前做着玩用的都是get请求,现在我自己搭博客时使用了post方法,结果发现后台(node.js)完全拿不到前台传来的参数.后来进过一番探索,终于发现问题所在. post提交数据的四种编码方式 1.application/x-www-form-urlencoded 这应该是最常见的post编码方式,一般的表单提交默认以此方式提交.大部分服务器语言对这种方式都有很好的支持.在PHP中,可以

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

    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方法,传入请求

  • 详解vue axios用post提交的数据格式

    vue框架推荐使用axios来发送ajax请求,之前我还写过一篇博客来讲解如何在vue组件中使用axios.但之前做着玩用的都是get请求,现在我自己搭博客时使用了post方法,结果发现后台(node.js)完全拿不到前台传来的参数.后来进过一番探索,终于发现问题所在. post提交数据的四种编码方式 1.application/x-www-form-urlencoded 这应该是最常见的post编码方式,一般的表单提交默认以此方式提交.大部分服务器语言对这种方式都有很好的支持.在PHP中,可以

  • Vue axios 将传递的json数据转为form data的例子

    修改main.js文件中axios的配置: 在发送请求前将数据用qs模块转化 修改请求头的Content-Type='application/x-www-form-urlencoded' 具体配置如下: import axios from 'axios' import qs from 'qs' // 添加请求拦截器 axios.interceptors.request.use(function (config) { if(config.method!='get'){ config.data=qs

  • 使用axios请求时,发送formData请求的示例

    最近做的一个项目中有一个特例接口,传json后端接收不到,对接的后端又不愿意改接口,只能用formData方式传参,由于好多年没有用过formData,头痛了一会,找到了解决方法,发现非常简单,在此做个笔记! var formData = new FormData(); formData.append("username", "Groucho"); formData.append("accountnum", 123456); fetch('/us

  • 解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题

    node.js含有%百分号时,发送get请求时浏览器地址自动编码的问题 sales\报表.png 在发到后台时,会自动编码成: /file/view/sales/%E6%8A%A5%E8%A1%A8.png 在node.js会自动反编码成: sales\报表.png 不过如果文件名中含有%百分号,编码过程则会出现问题,如 sales\报%表.png 发送到node.js接收到的自动编码数据: /file/view/sales/%E6%8A%A5%%E8%A1%A8.png %E6%8A%A5%%

  • 在Web关闭页面时发送Ajax请求的实现方法

    在Web关闭页面时发送Ajax请求的实现方法

    前言 有时候我们需要在用户离开页面的时候,做一些上报来记录用户行为.又或者是发送服务器ajax请求,通知服务器用户已经离开,比如直播间内的退房操作. 本文主要分两部分来讲解怎么完成退出行为的上报. 1.事件监听 浏览器有两个事件可以用来监听页面关闭,beforeunload和unload. beforeunload是在文档和资源将要关闭的时候调用的, 这时候文档还是可见的,并且在这个关闭的事件还是可以取消的.比如下面这种写法就会让用户导致在刷新或者关闭页面时候,有个弹窗提醒用户是否关闭. win

  • Java发送form-data请求实现文件上传

    如何使用Java发送form-data格式的请求上传multipart文件?,供大家参考,具体内容如下 封装了以下工具类: package com.leeyaonan.clinkz.common.util; import java.io.File; import java.io.IOException; import java.nio.charset.StandardCharsets; import java.util.*; import java.util.concurrent.Schedul

  • Python发送form-data请求及拼接form-data内容的方法

    网上关于使用python 的发送multipart/form-data的方法,多半是采用 ulrlib2 的模拟post方法,如下: import urllib2 boundary='-------------------------7df3069603d6' data=[] data.append('--%s' % boundary) data.append('Content-Disposition: form-data; name="app_id"\r\n') data.appen

  • vue cli3 项目中如何使用axios发送post请求

    vue cli3 项目中如何使用axios发送post请求

    目录 使用axios发送post请求 首先需要安装对应的第三方包 发送post请求 发送get请求将index.js中再添加如下代码 vue使用axios的踩坑记录 axios跨域 解决方法 axios发起post请求后端无法接收数据 使用axios发送post请求 react  同样适用 首先需要安装对应的第三方包 cnpm  i  -S axios cnpm  i  -S lodash 然后在做下边的 在vue 项目中创建一个这样的文件目录 发送post请求 index.js中的文件内容是:

  • 防止重复发送Ajax请求的解决方案

    在页面中有多个按钮,点击该按钮可以异步的去服务端读取数据,然后在前端将数据展示出来. 每个按钮点击请求的页面都是同一个,但是请求的参数不同,所以返回的内容就不同. 在连续点击多个按钮的时候就会发出多个异步请求.那么根据请求返回的快慢(因为不同按钮参数不同,返回内容不同,所以会有快慢之分),数据会依次的展示出来,那么就会出现一个先点击的按钮,由于他请求的数据量比较大,导致数据被后显示出来. 一.问题解决 解决这种问题有两种方式: 1.当连续进行多个请求,并且请求的url地址相同时.放弃前面的所有请

  • C#基于HttpWebRequest实现发送HTTP请求的方法分析

    本文实例讲述了C#基于HttpWebRequest实现发送HTTP请求的方法.分享给大家供大家参考,具体如下: 调用第三方API的时候要用到HttpWebRequest类发送HTTP请求,网上查阅一番后大致了解了该类的用法,现记录如下. 首先引入HttpWebRequest类,System.IO类 using HttpWebRequest using System.IO GET请求 /// <summary> /// 发送GET请求 /// </summary> /// <p

  • 解决axios发送post请求上传文件到后端的问题(multipart/form-data)

    解决axios发送post请求上传文件到后端的问题(multipart/form-data)

    目录 项目场景: 问题描述 原因分析: 解决方案: 项目场景: 后端:实现了一个文件上传服务接口,可以接收前端传递过来的MultipartFile文件,并存储到服务器本地中.前端:获取type为file的<font>标签中的文件,使用axioshttp请求库,发送post请求,将文件发送给后端. 问题描述 在js中发送上传文件请求的常规代码如下: new一个FormData对象,使用append方法将文件添加到表单中 FormData专门用于js中发送multipart/form-data格式

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

    今天在对后台接口的时候,上传报名信息,利用axios 的post请求,发数据, 但是显示参数错误,但是查看header的时候,发现居然是一个对象: 这可不行,然会就想着怎么把对象搞成formdata,直接加入两段代码就好, transformRequest: [function (data) { let ret = '' for (let it in data) { ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]

随机推荐