Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >无法找到如何在Vue.js中生成包含“多部分/表单-数据”文件的Axios POST请求

无法找到如何在Vue.js中生成包含“多部分/表单-数据”文件的Axios POST请求
EN

Stack Overflow用户
提问于 2020-08-07 03:19:33
回答 1查看 21关注 0票数 0

当在前端使用Vue.js时涉及文件时,当POST请求涉及到Axios时,我在弄清楚如何向后端发出POST请求时遇到了极大的困难。

我想让用户为他正在创建的服务器选择一个图像,但是,我碰到了一个砖墙。我添加了一个带有文件类型的输入,每当用户选择一个图像时,我就将file属性设置为该图像。问题是我不知道下一步该做什么。如何使Axios以enctype= multipart/form-data的形式发送POST请求,以及如何将该文件应用于我与POST请求一起发送的有效负载?

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<form @submit='createServer($event)'>
    <input v-model="addServerInput.name" placeholder="Enter a server name">
    <input type="file" name="image" @change="handleFileUpload($event)">
    <button type="submit" name="button">Create</button>
</form>

<script>
import axios from 'axios'
export default {
    data(){
        return {
            addServerInput: {
                name: '',
                file: ''
            }
        }
    },
    methods: {
        handleFileUpload(event){
            this.addServerInput.file = event.target.files[0]
        },
        createServer(event){
            event.preventDefault()

            let server = {
                name: this.addServerInput.name,
                userId: localStorage.userId
            }

            axios.post('/createServer', server)
            .then((response) => {
                this.addServerWindow = false;
                this.$store.commit('addServer', response.data)
            })
            .catch((error) => {
                console.log(error);
            });
        }
    }
}
</script>
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-08-07 03:28:26

如果将一个普通对象作为第二个参数传递给post,那么Axios将将其编码为JSON。

若要将数据编码为多部分,请传递一个FormData object

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let server = new FormData();
server.append("file", this.addServerInput.file, this.addServerInput.name);
server.append("userId", localStorage.userId);
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/63300746

复制
相关文章
axios post 请求下载 excel 文件
服务器的 excel 文件生成工具用的是 laravel 扩展包 Laravel Excel
章鱼喵
2020/05/04
3.7K0
Axios发送post请求下载文件
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/pyycsd/article/details/80969651
用户1212940
2019/06/20
3.4K0
接口测试如何在post请求中传递文件
2.找到body这个选项,输入文件对应的参数名,在然后把参数名后面的text选择为file。
sik1
2022/06/21
3.4K0
axios的post请求参数格式
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
全栈程序员站长
2022/11/15
2K0
axios发生get,post请求
以下内容摘自https://www.kancloud.cn/yunye/axios/234845
SingYi
2022/07/14
1.3K0
axios发生get,post请求
post请求包含哪些参数(请求方式post和get)
1)、HTTP 协议是以 ASCII 码 传输,建立在 TCP/IP 协议之上的应用层规范。规范把 HTTP 请求分为三个部分:状态行、请求头、消息主体。 2)、协议规定 POST 提交的数据必须放在消息主体(entity-body)中,但协议并没有规定数据必须 使用什么编码方式 。实际上,开发者完全可以自己决定消息主体的格式,只要最后发送的 HTTP 请求满足上面的格式就可以。 3)、数据发送出去,还要服务端解析成功才有意义。一般服务端语言如 php、python 等,以及它们的 framework,都内置了自动解析常见数据格式的功能。服务端通常是根据请求头(headers)中的 Content-Type 字段来获知请求中的消息主体是用何种方式编码,再对主体进行解析。
全栈程序员站长
2022/07/29
3.8K0
[未解决]报错:requests post请求无法返回数据
报错代码: f={"appid":"wx0e7876190882657b","env":"production","pid":"100000568810","storeId":326081810,"templateId":2817,"wxTemplateId":2817,"zhanId":378279,"refer":"","openid":"oOPlO5U0Q56iegYMJujqP-csYt5w","source":1,"sdpSource":"ec","longitude":114.05454,"la
hankleo
2020/09/17
1.1K0
axios POST提交数据的三种请求方式写法
总结: 1、从jquery转到axios最难忘的就是要设置Content-Type,还好现在都搞懂了他们的原理 2、上面三种方式会对应后台的请求方式,这个也要注意,比如java的@RequestBody,HttpSevletRequest等等
跟着阿笨一起玩NET
2020/07/23
2.6K0
axios POST提交数据的三种请求方式写法
axios POST提交数据的三种请求方式写法
而在使用POST时对应的传参使用的是data,data是作为请求体发送的,同样使用这种形式的还有PUT,PATCH等请求方式。有一点需要注意的是,axios中POST的默认请求体类型为Content-Type:application/json(JSON规范流行),这也是最常见的请求体类型,也就是说使用的是序列化后的json格式字符串来传递参数,如:{ "name" : "mike", "sex" : "male" };同时,后台必须要以支持@RequestBody的形式接收参数,否则会出现前台传参正确,后台接收不到的情况。 如果想要设置类型为Content-Type:application/x-www-form-urlencoded(浏览器原生支持),可以用qs这个库来格式化数据。默认情况下在安装完axios后就可以使用qs库。
跟着阿笨一起玩NET
2020/10/09
18.4K0
axios POST提交数据的三种请求方式写法
vue中axios处理http发送请求的示例(Post和get)
axios中文文档:https://github.com/mzabriskie/axios#using-applicationx-www-form-urlencoded-format
晓歌
2018/08/15
5.5K0
vue中axios处理http发送请求的示例(Post和get)
httpclient模拟post请求json封装表单数据
以下代码包括最基本的GET、POST、JSON参数的POST方式的请求。(相当于POSTMAN中使用raw编写的参数)
I Teach You 我教你
2018/12/14
8.2K0
httpclient模拟post请求json封装表单数据
以下代码包括最基本的GET、POST、JSON参数的POST方式的请求。(相当于POSTMAN中使用raw编写的参数)
I Teach You 我教你
2023/07/18
3990
Vue.js知识点整理
Vue.js是一个渐进式、基于MVVM设计模式的纯前端JavaScript框架。它可以与其他技术混用,适用于以数据操作为主的项目,无需依赖后端技术。下面是关于Vue.js的一些重要知识点整理:
李才哥
2023/06/23
3950
Vue.js知识点整理
resteasy 接收post请求参数——json and 表单
接收端则需要在方法头上声明如下的注解: 假如有一个String类型的叫做param的参数
MickyInvQ
2020/09/27
3.2K0
resteasy 接收post请求参数——json and 表单
POST表单数据
在之前的文章中,我们了解到了如何进行API的简单调用,这仅仅输入 GET类型的操作,而现在我们需要对网站进行POST。
摸鱼的G
2023/02/22
6650
SpringMVC源码分析:POST请求中的文件处理
本章我们来一起阅读和分析SpringMVC的部分源码,看看收到POST请求中的二进制文件后,SpingMVC框架是如何处理的;
程序员欣宸
2020/02/13
1.5K0
Web前端学习 第6章 jQuery Ajax 3 Ajax第三方模块
其实在实际项目开发中,我们并不需要自己去封装,已经有很多成熟的Ajax第三方模块了,直接使用即可。
学习猿地
2020/06/22
8710
Web前端学习 第6章 jQuery Ajax 3 Ajax第三方模块
【融职培训】Web前端学习 第6章 jQuery Ajax 3 Ajax第三方模块
其实在实际项目开发中,我们并不需要自己去封装,已经有很多成熟的Ajax第三方模块了,直接使用即可。
学习猿地
2020/06/24
7280
多文件上传post
var fileList = this.$refs["itemuploadfile"].uploadFiles; var formData = new FormData(); for (let index = 0; index < fileList.length; index++) { var fileObj = fileList[index].raw; formData.append("files", fileObj);
程序员不务正业
2020/03/20
1.6K0
Vue基础
注意:使用v-text时,会将标签内部的内容覆盖并且替换成对应的内容,若不希望内容被覆盖,则不可使用v-text的写法,两种写法都支持表达式,如:v-text="message + ‘!’",{{ message + “!” }}。
Cikian.
2022/09/22
2.7K0
Vue基础

相似问题

axios post请求发送表单数据

11256

Vue.JS Axios POST请求.then方法

20

如何在包含json对象请求体和多部分表单数据(MP4)的post请求中使用Axios.post()

15

使用axios在POST多部分/表单数据请求中发送文件和json

40

如何在REACT中的Axios Post请求中追加表单数据

239
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文