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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Pycharm社区版创建Flask项目详解「建议收藏」

    Pycharm社区版创建Flask项目详解「建议收藏」一、在原有工程上修改1、创建工程选择newproject创建工程输入项目名,选择配置好的虚拟环境项目创建好之后是一个空的项目,里面没有任何文件,下面我们来新建工程目录2、配置工程目录在工程根目录新建app.py文件在app.py中的代码如下:fromflaskimportFlask,render_templateapp=Flask(__name__)app.config[‘SECRET_KEY’]=’1456719640@qq.com’@app.rou

    2022年8月29日
  • 【FPGA——工具篇】:Modelsim SE-64 10.4下载、破解、安装过程

    【FPGA——工具篇】:Modelsim SE-64 10.4下载、破解、安装过程ModelsimSE-6410.4破解安装过程百度云链接:https://pan.baidu.com/s/1ONbjNLajFKzHDJ9bs4gz6Q密码:by0p压缩包解压密码:Lily_9 ①执行软件的正常安装程序.exe,点点我同意神马的….(需要重启一次)②在软件安装目录中找到mgls64.dll文件,右键文件属性取消只读属性。mgls64.dll文件的默认路径…

    2022年5月23日
  • mac 安装ll命令[通俗易懂]

    mac 安装ll命令[通俗易懂]mac安装ll命令mac-bash:ll:commandnotfound在linux系统下我们经常使用ll、la命令。但在mac系统时缺没有。提示:-bash:ll:commandnotfound。这是因为ll、la不是真的命令,而是一些常用命令和参数搭配的别名。所以我们在MacOS下配置下就好了。1、跳到个人目录下面localhost:~huangfy20$cdlocalhost:~huangfy20$pwd/Users/huangfy202、打开.bash

    2022年9月2日
  • 在SharePoint 2010中部署RBS (转)

    在SharePoint 2010中部署RBS (转)

    2021年12月9日
  • XOR 加密简介

    XOR 加密简介作者: 阮一峰日期: 2017年5月31日本文介绍一种简单高效、非常安全的加密方法:XOR加密。一、XOR运算逻辑运算之中,除了 AND 和 OR,还有一种 XOR 运算,中文称为”异或运算”。它的定义是:两个值相同时,返回false,否则返回true。也就是说,XOR可以用来判断两个值是否不同。trueXORtrue/

    2022年7月16日
  • GridBagConstraints布局[通俗易懂]

    GridBagConstraints布局[通俗易懂]查看API文档,我们就知道GridBagConstraints有十一个属性!自我感觉API文档里面有些东西讲得不是很好理解,就象gridx与gridy这两个属性一样,有些书上说gridx表示行,gridy表示列!API文档里面更是讲了一大堆。    现在,提供本人对这些属性的理解:  1,  gridx:表示组件的左边缘与网格左部之间的距离,如果学过HTML的话,那么gridx

    2022年9月9日

发表回复

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

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