请求后端接口时,把参数放进FormData里面

已于 2023-08-02 13:09:57 修改
阅读量707 收藏 2
点赞数
分类专栏： Vue JS 文章标签： vue javascript
于 2021-03-29 10:18:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39691676/article/details/115294836
版权
Vue 同时被 2 个专栏收录
23 篇文章 2 订阅
订阅专栏
JS
12 篇文章 0 订阅
订阅专栏
这篇博客介绍了如何利用Axios库在JavaScript中构建一个POST请求，通过创建FormData对象并设置'Content-Type'为'multipart/form-data'来发送数据。示例代码展示了在成功和失败情况下的响应处理。
摘要由CSDN通过智能技术生成

使用axios请求接口

      const formdata = new FormData()
      formdata.append('params', data)
      axios({
        url: URL,
        method: 'post',
        headers: { 'Content-Type': 'multipart/form-data' },
        data: formdata
      }).then(res => {
        if (res.data.rel) {
        } else {
          this.$message.error('系统错误请联系管理员')
        }
      })
Mr.app
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue前端如何向后台发送值_Vue 使用formData方式向后台发送数据的实现
weixin_39623671的博客
12-22 2128
很多时候在使用form向后台发送数据的时候，并不需要使用到表单组件。例如时间戳、ip等，这个时候除了ajax之外，还可以使用HTML5的一个全新方法FormData；在input[type = file]的文件类型中，很多时候想要把一张图片或者是使用canvas绘制好的图像传送到后台时，无法赋值给file文件，只能转换为base64类型传送到后台，然后由后台转换为图片再进行服务器存储；此过程较为复...
解决前端FormData对象的后端接收问题-附件资源
03-02
解决前端FormData对象的后端接收问题-附件资源
axios post请求怎么把参数放到Form Data里面？
zhongmei121的专栏
02-10 885
接口是post请求，怎么把入参放到Form Data？vue项目+axios。
vue3 中传递 fromData 格式的写法
阿乐的博客
06-19 516
在我们前端调用接口的使用中 我们会传递参数 大部分是json 格式的 但是有的时候 回事 formData 的格式的 那我们前端就需要修改一下 传递对应的东西。如果不传递 paramsFormdata 就默认是json 传就是formData 的格式的。我说一下我使用Taro 框架中的写法 就是移动端 和小程序中的写法。我这里有一个判断 当我需要传递这个 formData 的格式的时候。我说一下在web端中的使用 我使用的是tdesign 的框架。人家封装好的request 的文件我就不写了。
vue3错误排查-POST请求的body参数 传参方式form-data和json
weixin_42479421的博客
11-06 970
vue3中接口无报错问题，但不显示数据/无数据---->body参数方式为form-data，平常使用的是json
post传参传form_data格式的参数
活宝小娜的博客
12-16 1213
【代码】post传参传form_data格式的参数。
调用接口时form-data形式如何传递数据
lianwenxiu的博客
04-21 9024
和后台调接口的时候遇到一个问题，记录一下 调用退出登录的接口时，使用的是form-data的形式，在vue中如何设置 1.需要在axios拦截器的地方通过传递过来的 type 值来判断，如果是form就设置请求头：content-type：application/x-www-form urlencoded； // Request interceptor service.interceptors.request.use(config => { // 判断有无token，如果有设置h.
vue项目中form data形式传参
寬真
09-27 1042
原文链接：https://blog.csdn.net/weixin_44994731/article/details/108195555。版权声明：本文为CSDN博主「东方晓帅」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。如下图，在Form Data的中形式下，需要使用qs.stringify(params) ,params是一个对象。vue项目中form data形式传参，需要在headers中添加如下代码。如下图，在Form Data的中形式下，直接传的是对象。
axios 实现post请求时把对象obj数据转为formdata
01-19
今天在对后台接口的时候，上传报名信息，利用axios 的post请求，发数据， 但是显示参数错误，但是查看header的时候，发现居然是一个对象： 这可不行，然会就想着怎么把对象搞成formdata,直接加入两段代码就好， ...
使用axios请求时,发送formData请求的示例
10-16
在前端开发中，数据传输是不可或缺的一环，特别是在与后端API进行交互时。`axios`是一个常用的JavaScript库，用于发起HTTP请求。然而，并非所有API接口都接受JSON格式的数据，有时后端可能会要求以`FormData`的形式...
vue3发送FormData格式的请求
最新发布
weixin_42112949的博客
07-17 228
【代码】vue3发送FormData格式的请求。
vue使用axios上传文件(FormData)的方法
10-17
主要介绍了vue使用axios上传文件(FormData)的方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue3 含文件类型传Form Data数据格式给后台文件参数值异常 file: [object Object]
agua001的博客
05-16 4261
vue3 含文件类型传Form Data数据格式给后台文件参数值异常 file: [object Object]
vue3 + ts 项目 结合element 实现自定义上传图片上传文件（限制大小以及格式）FormData 格式
weixin_55042716的博客
09-28 2812
本地实现上传图片和上传文件，(限制大小以及格式)，以FormData 格式传递给后端，点击确定按钮时调用接口。
vue3一个相对完整的form组件
qq_46617584的博客
04-27 1692
【代码】vue3一个相对完整的form组件。
nestjs + vue3 自定义formdata上传文件
小扣柴扉久
05-17 198
nestjs + vue3 上传
vue3+ts+vite+elementPlus实现文件上传导入excle给后端，并且清空上传文件后的列表，以及formData变成[object FormData]的解决方法
热门推荐
Chen__FY的博客
06-14 1万+
方法来传递数据的，需求是实现类似与这样的：来一个弹框实现两个excel的文件导入。// 创建一个空白的 FormData 对象，里面没有包含任何数据。8.成功将文件转换为binary（二进制）并上传给后端！方法，可以向空白的 FormData 中追加键值对数据。3.引用elementPlus组件中的upload，：upload有默认的上传文件方式，并且是数组类型。1.首先我们文件上传的方法用到的是。调用 FormData 对象的。9.ts文件上传的完整代码。
vue上传文件formData上传解决流程
qq_35664065的博客
02-16 3615
vue中formData格式上传，axios跨域设置等流程
vue3 + elementplus + koa2 + formData实现文件上传
qq_48578649的博客
11-10 3261
1、前端页面 <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" list-type="picture-card" :on-success=...
使用XMLHttpRequest对象向后端发送请求，并将FormData作为参数传递。以及后端java接口代码
05-26
前端代码示例： ```javascript const form = new FormData(); form.append('name', 'John'); form.append('email', 'john@example.com'); const xhr = new XMLHttpRequest(); xhr.open('POST', '/api/user'); xhr.send(form); ``` 后端Java接口代码示例： ```java @PostMapping("/api/user") public ResponseEntity<String> createUser(@RequestParam("name") String name, @RequestParam("email") String email) { // do something with name and email return ResponseEntity.ok("User created successfully"); } ``` 使用`@RequestParam`注释将表单数据中的值绑定到Java方法的参数上。这个示例中，我们可以使用`name`和`email`参数来获取前端发送的表单数据。在方法体中，我们可以处理这些值并返回HTTP响应。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值