vue axios上传formData类型数据方法

已于 2022-01-26 15:55:34 修改
阅读量1.7k 收藏 8
点赞数 1
文章标签： vue.js 前端 javascript
于 2021-11-08 17:35:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42619992/article/details/121212309
版权

记录一下自己在开发时遇到的一些问题

如果我们直接设置axios 的headers属性 'Content-Type': 'application/x-www-form-urlencoded'

然后传data的话 数据类型还是为JSON 这是一个坑 

此时请求体数据类型

这个时候我们需要引入 vue自带的qs模块

在main.js文件引入 并全局注入qs方法

import qs from 'qs'

Vue.prototype.qs = qs

 然后在axios里使用 对需要上传的数据对象进行序列化处理

this.qs.stringify()

此时请求体中的数据为formData格式

 

 后端正确接收数据 该问题解决 

Yne宴宁
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue axios 发送 FormData 请求
2401_84010030的博客
03-30 2561
上面三种值介绍和都是表单数据发送时的编码类型。form的enctype和，默认为。当action为get时候，浏览器用的编码方式把form数据转换成一个字串，然后把这个字串append到url后面，用?分割，加载这个新的url。当action为post时候，浏览器把form数据封装到http body中，然后发送到server。如果没有type=file的控件，用默认的就可以了。但是如果有type=file的话，就要用到了。浏览器会把整个表单以控件为单位分割，并为每个部分加上等信息，并加上分割符。
vue如何使用formData传递文件类型的数据
xiaoweids的博客
05-24 1975
本文主要介绍了vue如何使用formData传递文件类型的数据问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教。
Vue中使用Axios发送FormData请求
最新发布
牛肉胡辣汤
05-30 1328
通过使用Axios和FormData组合，我们可以在Vue项目中轻松发送包含文件或表单数据的请求。Axios提供了简单而强大的API来处理HTTP请求，而FormData提供了用于构建表单数据的API。这使得在Vue中实现文件上传和表单提交等功能变得非常容易。
axios 表单（formData）方式提交请求，以及文件上传方式
热门推荐
rudy_zhou的博客
01-27 5万+
axios 表单（formData）方式提交请求，以及文件上传方式一、使用表单格式请求二、上传文件总结 一、使用表单格式请求 更改请求头 headers 中 content-type 为 application/x-www-form-urlencoded axios 官方文档 application/x-www-form-urlencoded 格式请求 例子： import qs from 'qs'; const data = { 'bar': 123 }; const options = { me
vue项目中使用axios传递FormData格式参数
qq_41687299的博客
08-18 2941
1、在请求头中配置 import Vue from 'vue' import axios from 'axios' // 创建axios实例 const service = axios.create({ baseURL: process.env.VUE_APP_API_BASE_URL, // api base_url timeout: 20000, // 请求超时时间, headers: { //关键 'Content-Type': 'appl
vue使用axios上传文件(FormData)的方法
12-08
在 Vue 中使用 Axios 上传文件，特别是通过 FormData 对象处理文件上传，是一种常见的做法。FormData 对象允许我们方便地封装表单数据，包括二进制文件，然后通过 AJAX 请求发送到服务器。 在 Vue 应用中，首先需要...
Vue axios 中提交表单数据(含上传文件)
08-30
Vue axios 中提交表单数据(含上传文件) 在 Vue 中，使用 axios 库来提交表单数据是一种常见的做法，尤其是在上传文件时。下面我们将详细探讨如何使用 axios 在 Vue 中提交表单数据，包括上传文件。 什么是表单提交...
Vue 使用formData方式向后台发送数据的实现
10-17
本文将详细介绍如何在Vue中利用`FormData`发送数据到后台。 首先，让我们了解`FormData`的基本用法。创建一个新的`FormData`对象，然后通过`append`方法添加数据。例如，假设我们要上传一个文件并附加一个用户ID： ...
Vue 3.0 + axios + formdata图片上传formdata 为空
辉生活-记录程序生活的点滴。
06-28 3335
背景： 项目中需要用到ImageCropper控制上传图片的比例。结果formdata一直为空。 原始代码如下： let formData = new FormData(); formData.append("file", data); let config = { headers: { "Content-Type": "multipart/form-data", "Access-Token": token } } }; //此时formData中存在file _this.axios.pos
axios上传时formdata为空的解决方法
skyler001的博客
06-09 3355
axios传formdata为空的解决办法
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
使用axios发送post请求上传文件(multipart/form-data)到后端
AmbitiousJun的博客
04-26 3万+
项目场景： 后端：实现了一个文件上传服务接口，可以接收前端传递过来的MultipartFile文件，并存储到服务器本地中。 前端：获取type为file的<font>标签中的文件，使用axioshttp请求库，发送post请求，将文件发送给后端。 问题描述 在js中发送上传文件请求的常规代码如下： new一个FormData对象，使用append方法将文件添加到表单中 FormData专门用于js中发送multipart/form-data格式请求 append方法的key为表单中的name
axios使用form-data传参方式解决参数格式不正确问题
qq_35946021的博客
04-27 4999
vue 中axios使用form-data传参方式，解决参数格式不正确问题
在vue项目中使用axios发送FormData
weixin_30650039的博客
12-26 2228
这个是axios的中文文档，挺详细的： https://www.kancloud.cn/luponu/axios/873153 文档中的 使用 application/x-www-form-urlencoded format 这一部分讲的就是 通过axios发送FromData的方法， 下面是我在vue项目中使用的示例： 在本组件的method添加了一个点击事...
vue axios form-data格式 传输数据和文件
block_xu的博客
09-09 8515
vue axios form-data格式 传输数据和文件 form-data在post请求下的一种传输方式，数据会在Form Data中传输，传输的数据由boundary来分割 ------WebKitFormBoundaryRO0YA4pq9oCgwTkt Content-Disposition: form-data; name="id" undefined ------WebKitFormBoundaryRO0YA4pq9oCgwTkt Content-Disposition: form-data;
axios用post提交的数据格式
TSeven37的博客
10-23 1995
vue框架推荐使用axios来发送ajax请求，之前我还写过一篇博客来讲解如何在vue组件中使用axios。但之前做着玩用的都是get请求，现在我自己搭博客时使用了post方法，结果发现后台（node.js）完全拿不到前台传来的参数。后来进过一番探索，终于发现问题所在。 post提交数据的四种编码方式 1.application/x-www-form-urlencoded 这应该是最常见的pos...
base64和网络链接如何互转？使用axios请求时，如何发送formData请求？
铃儿响叮当
10-19 2633
// 创建formData对象 const form = new FormData() // 将上传的文件对象转为formData对象 // fileData:上传的文件对象 form.append('file', fileData) // api接口正常请求即可,只不过传的值是被转换后的form axios({ method: 'post', url: url, data: form }) ...
vue+axios上传文件
h363659487的博客
01-11 5万+
vue+axios上传文件
vue3 axios改成formdata提交
06-13
要将Vue3中使用Axios库进行的POST请求改为使用FormData进行提交，你可以按照以下步骤进行修改： 1. 安装FormData库 首先需要安装FormData库，可以使用npm或者yarn来安装，具体命令如下： ``` npm install form-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值