如何用axios将json数据和文件一起提交到后台

最新推荐文章于 2023-07-21 09:59:57 发布
最新推荐文章于 2023-07-21 09:59:57 发布
阅读量3.6k 收藏 9
点赞数 3
分类专栏： IDEA 上传文件 axios 文章标签： ajax json vue 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sk__qy/article/details/114678255
版权
IDEA 同时被 3 个专栏收录
1 篇文章 0 订阅
订阅专栏
上传文件
1 篇文章 0 订阅
订阅专栏
axios
1 篇文章 0 订阅
订阅专栏
  • 首先使用的是elementUI表单组件，让用户进行信息的填写

  • 定义对象用来接收并记录表单的内容

  • 对于文件上传，我们可以从el-upload提供的on-change函数的传参中取得上传文件对象，将此对象存入我们建立的接受对象的相应属性中，以备后续的转化

  • 关键步骤，将我们的json对象存入一个表单对象中，并将转换好的对象当作请求参数发出请求

  • 对于post请求，应添加 Content-Type ： ‘multipart/form-data’ 的请求头，注意是 ‘Content-Type’！下图中的 contentType 在其他函数中已经做了转变。

  • 最终提交成功

 
shuaikang_
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
axios post封装对象到后端_axios实用post方法发送json对象到springboot后台
weixin_42132598的博客
12-30 771
415是badrequest错误的请求，出现这种错误一般有如下几种情况1：后台要求post方法，前端用了get请求，或者其他类似情况2：请求的参数不对3：Content-Type不对前端代码如下：'''添加博客博客标题博客内容Vue.jsNode.jsReact.jsAngular4.js作者{{author}}添加博客博客总览博客标题: {{blog.title}}博客内容:{{blog.con...
javaweb 前台将数据以AJAX方式提交到后台，后台以json格式解析并返回前端
不言尘世
10-28 2343
今天搞了好久这个前后端数据交互的过程，有点难受，写点总结吧 1 html文件传输数据（AJAX） $.ajax({ type:"POST", dataType:"json", url:"UserServlet?method=loginAjax", data:{ "loginacct":loginacct, "userpas...
axios上传文件与数据 后台接收
g648204988的博客
03-23 1815
Html部分 <form id="form" method="post"> a:<input type="text" v-model="a" name="acc"> <input type="file" name="file" id="file"> <input type="button" id="button" @click="btn"> </form> js部分 function btn() { var file = d
ElementUI和Axios提交带有文件的表单
qq_34182649的博客
08-15 569
完整表单代码 <el-form :model="addForm" ref="addFormRef" label-width="75px"> <el-form-item label="学校" prop="school"> <el-select v-model="addForm.school" placeholder="请选择学校"> <el-option v-for="item in school
Axios提交带有文件的表单(ElementUI)
ANNENBERG的博客
08-27 791
<el-form :model="addForm" ref="addFormRef" label-width="75px"> <el-form-item label="学校" prop="school"> <el-select v-model="addForm.school" placeholder="请选择学校"> <el-option v-for="item in schools" :key...
JS将表单数据与文件流一起提交至JAVA后台处理
伊格尼斯
09-29 2042
问题描述 今天在做表单提交的时候遇到一个问题： 如何将表单与上传的文件流一起上传至后台服务器，整个过程中只允许存在一次请求。 于是在网上搜了许久，并没有直接讲到将表单数据与文件流一起上传至后台进行数据处理 然后就一直自己在调试，终于找到了解决办法。 代码展示 首先先展示前端代码（前端代码为伪代码） /** * 首先我们会有一个表单JSON对象 * 我这里假设为 submissionData...
element-plus、axios接收json数据
weixin_51753727的博客
08-17 931
element-plus、axios接收json数据
详解vue axios用post提交的数据格式
10-18
既然知道Axios的post方法默认使用application/json格式编码数据，那么解决方案就有两种，一是后台改变接收参数的方法，另一种则是将Axios的post方法的编码格式修改为application/x-www-form-urlencoded，这样就不...
解决vue中post方式提交数据后台无法接收的问题
10-18
在Vue.js应用中，POST方式提交数据到后台时，可能会遇到数据无法被后台正确接收的问题。这通常是由于数据格式不正确或与后端接口的预期格式不匹配导致的。本文将详细探讨这个问题，并提供解决方案。 首先，理解POST...
axios数据发送与后台响应
胖大xian
05-24 2135
axios数据发送与后台响应 在写vue项目时，肯定会用到的就是axios。我们可以通过axios将数据从后台读取然后也可以进行数据的修改等操作。但对于没有经验的人来说，第一次使用axios的post时会出现很多意想不到的事情。下面我们通过几个简单的示例来探究以下到底如何玩转axios的数据发送。 1. 前期准备 首先，要能发送数据，那就必须先创建一个vue。下面是一个简单的例子。 <template> <div> <button @click="sen
使用axios上传文件时,如果也需要同时传送其他表单数据,可以这样做
T3165919332的博客
06-07 377
【代码】使用axios上传文件时,如果也需要同时传送其他表单数据,可以这样做。
多个文件上传+表单数据同时请求的前后端处理
zhang33565417的博客
06-07 1673
前端在新增数据的时候将表单中的多个文件和表单的其余参数一并传递给后端的某个接口。
提交文件到后端的方法
gwgw0621的博客
10-23 2608
在项目中我们经常会遇到图片的上传问题,对于后端工程师来说,前端相对来说很薄弱.在此总结了两种简单的提交图片到后台的方法.
多文件与表单内容一起上传
weixin_44827018的博客
11-14 617
多文件与表单内容一起上传
前端传文件和json给后端时的处理方案
Beat_IT的博客
02-26 2531
开发中碰到这个需求，既需要获取文件流，也需要获取json数据。解决方法就是将json也和文件流一样，都通过form-data格式传过来。具体的看下面的例子就懂啦！ 首先需要的参数格式：User就不说了，是一个对象。后端需要的传参是public BaseDataVO upload(UploadFile uploadFileReqVO) ... 然后UploadFile对象字段是一个MultipartFile和List<User>对象。经过尝试,使用下面的方法进行传参是可行的。 ...
Vue组件+Spring boot自定义上传文件同时传输json数组
home_498的博客
10-05 3990
本实例使用@RequestPart注解同时接受上传文件和json数据。支持json数据自动解析注入为java对象 需要用到vue上传文件组件 el-upload，请自行引入。 vue端页面代码： <el-upload ref="upload" class="upload-demo" drag action="#" :auto-upload="false"> ...
axios04-文件上传
坤小的专栏
04-08 431
axios上传文件没有兼容性问题，还是使用以前的FormData 原因： FormData会自动帮你设置请求头为：multipart/form-data; <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <meta http-equiv=...
axios post传递对象_axios 怎么在Post请求中，同时传递文件和对象
weixin_31759829的博客
12-31 3485
addAppVersion(formdata: any, file: any) {const data = new FormData();data.append('appfile', file);data.append('appVersion', JSON.stringify(formdata));//Object.entries(formdata).forEach((arr: [string,a...
Axios同一个接口接收文件或json
最新发布
ly-chn的博客
07-21 430
文件转换功能, 如上传jpg转为png, 服务器可能会返回正常的png文件, 也可能会返回{code: 5001, msg: "读取文件失败, 请检查文件完整性"}或者Excel导入功能, 服务器可能返回{code: 2000, msg: “文件导入成功”}, 也可能返回一个带有错误信息的文件// 假设此时为正常返回, 但是抛出异常被全局异常捕获, 返回了json IOUtils . copy(convert(file) , resp . getOutputStream());
vue axios 传递json数据
06-28
然后，您可以将axios库与您的Vue组件的data对象一起使用，以便将JSON数据传递到后端服务器。例如，如果要传递以下JSON数据： ``` { "name": "John", "email": "john@example.com", "message": "Hello world" } `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值