vue formdata请求_vue修改数据没有渲染到页面的原因

vue formdata请求_vue修改数据没有渲染到页面的原因longlonglongtimenosee,最近遇到个奇葩的问题来记录下,不知道有没有小伙伴和我一样崩溃过。写了三年代码,上传这么简单的功能。第一次遇到前端入参fromData请求接口报500的问题,百度了好多资料尝试也没有解决。后台一直说我前端的问题,于是debugger一步一步查。下面来看看报错代码的流程,用你们的丰富经验和火眼金睛帮忙看下到底错在哪里了?!本项目用的是vue-cli…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

long long long time no see,最近遇到个奇葩的问题来记录下,不知道有没有小伙伴和我一样崩溃过。写了三年代码,上传这么简单的功能。第一次遇到前端入参fromData请求接口报500的问题,百度了好多资料尝试也没有解决。后台一直说我前端的问题,于是debugger一步一步查。下面来看看报错代码的流程,用你们的丰富经验和火眼金睛帮忙看下到底错在哪里了?!本项目用的是vue-cli3脚手架搭建,vue-admin-template后台框架开发。

1.首先封装axios请求,如下图所示:

vue formdata请求_vue修改数据没有渲染到页面的原因

vue formdata请求_vue修改数据没有渲染到页面的原因

2.vue文件点击上传按钮,获取的file文件赋值给this.file…如下所示:

vue formdata请求_vue修改数据没有渲染到页面的原因

红框内容是formData的值,console.log(formData.get(“file”))

vue formdata请求_vue修改数据没有渲染到页面的原因

debugger后的axios请求如下:

vue formdata请求_vue修改数据没有渲染到页面的原因

此时的formData为空对象。

network请求接口没有formData入参,不知道具体是什么原因。。。

vue formdata请求_vue修改数据没有渲染到页面的原因

请求头以及请求参数和后台沟通了也是一致的。。所以这种情况一直报500无法接收到前端参数,你们知道什么问题吗??

next,换了一种请求方式,用的axios原生请求格式写了一版,终于看到久违的200 ==…

接下来贴出解决的方案:

vue formdata请求_vue修改数据没有渲染到页面的原因

vue formdata请求_vue修改数据没有渲染到页面的原因

方方的,这样就解决了上传接口的问题。如果帮助到你们也是很开心的,当然也希望路过的大神们看到我的问题,欢迎留言哈~

stay hungry,stay fooish!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/181402.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 栈与队列的区别_栈和队列

    栈与队列的区别_栈和队列1、队列先进先出,栈先进后出。2、对插入和删除操作的"限定"不同。栈是限定只能在表的一端进行插入和删除操作的线性表。   队列是限定只能在表的一端进行插入和在另一端进行删除操作的线性表。  3、遍历数据速度不同。栈只能从头部取数据,也就最先放入的需要遍历整个栈最后才能取出来,而且在遍历数据的时候还得为数据开辟临时空间,保持数据在遍历前的一致性。队列则不同,它基于地址指针…

    2025年7月11日
    2
  • JVM调优工具总结「建议收藏」

    JVM调优工具总结「建议收藏」一、jps:虚拟机进程状况工具它可以列出正在运行的虚拟机进程,并显示虚拟机执行主类(MainClass,main()函数所在的类)名称以及正在运行的本地虚拟机唯一ID(LVMID);它是使用率最高的一个JDK命令行工具,因为其他的命令行工具都需要输入查询到的ID来确定要监控的是哪一个虚拟机进程。命令格式:jps[options][hostid]选项作用-q只…

    2022年5月6日
    28
  • Service Mesh详解

    Service Mesh详解ServiceMesh简介:这个词最早使用由开发Linkerd的Buoyant公司提出,并在内部使用。2016年9月29日第一次公开使用这个术语。2017年的时候随着Linkerd的传入,ServiceMesh进入国内技术社区的视野。最早翻译为“服务啮合层”,这个词比较拗口。用了几个月之后改成了服务网格。微服务(Microservices)是一种软件架构风格,它是以专注于单一责任与功能的小型功能区块(SmallBuildingBlocks)为基础,利用模块化

    2025年5月31日
    4
  • Excel文件解密软件

    Excel文件解密软件激活成功教程Excel文件的打开密码、也可以在不知道密码的情况下撤销工作表保护、编辑限制解密软件:okfoneEXCEL解密大师链接使用教程:打开软件,点击进入【找回密码】开始进行激活成功教程打开密码,把Excel文件添加到软件中,选择一个找回方法,点击【开始】就可以开始激活成功教程打开密码了点击进入【解除限制】,把Excel文件添加到软件中,点击【开始】就可以撤销文件的工作表保护了,整个过程不需要输入任何密码,进行暴力激活成功教程。…

    2022年6月28日
    25
  • JVM原理最全、清晰、通俗讲解,五天40小时吐血整理

    JVM原理最全、清晰、通俗讲解,五天40小时吐血整理JVM原理最全、清晰、通俗讲解,五天40小时吐血整理

    2022年4月23日
    41
  • Linux终端删除文件夹命令「建议收藏」

    Linux终端删除文件夹命令「建议收藏」前言本文介绍Linux系统中删除文件夹的命令,包括:rmdir、rm。Linux系统下删除文件夹是一个非常高频的需求,有很多方法可以删除文件夹,比如使用图形界面,或者通过终端删除。本文将介绍在Linux命令行下使用命令删除文件夹。1.使用rmdir命令删除文件夹rmdir命令是英文单词removedirectory的缩写,主要作用是删除文件夹。但是请注意,该命令只能用于删除空文件夹,而如果文件夹非空的话,将会报错。$rmdirdatarmdir:fai..

    2022年7月13日
    41

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号