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


相关推荐

  • pytest测试框架常用功能_unittest批量加载用例

    pytest测试框架常用功能_unittest批量加载用例目录前言###文章内容有配套的学习视频和笔记都放在了文章末尾###1、什么是单元测试框架2、单元测试框架主要做什么3、单元测试框架和自动化测试框架有什么关系4、Pytest测试框架说明5、Pytest框架和Unittest框架区别重点:配套学习资料和视频教学前言大家好我是测试达人,最近我会更新一系列pytest的框架全套教程,不比你在培训机构花的几千块买的ppt教程好吗?==白嫖真香!!###文章内容有配套的学习视频和笔记都放在了文章末尾###1、什么是单

    2022年10月14日
    0
  • 关于@NotNull 和 @Nullable

    关于@NotNull 和 @Nullable阅读spring源码发现里面用到两个注解@NotNull和@Nullable,现在做一个简单的分析参考文档:避免Java应用中NullPointerException的技巧和最佳实践安卓中的@Nullable和NotNull注释在写程序的时候你可以定义是否可为空指针。通过使用像@NotNull和@Nullable之类的annotation来声明一个方法是否是空指针安全的。…

    2022年6月12日
    34
  • FCoin交易所API文档

    本文介绍FCoinAPI介绍通过了解以下信息,您可以方便的使用FCoin提供的API来接入FCoin交易平台。认证执行下面的代码进行用户验证:importfcoinapi=fcoin.authorize(‘key’,’secret’,timestamp)FCoin使用APIkey和APIsecret进行验证,请访问设置中心,并…

    2022年4月6日
    43
  • vue $listeners $attr_vue query

    vue $listeners $attr_vue query1、vm.$attrs2.4.0新增类型{[key:string]:string}只读详细包含了父作用域中不作为prop被识别(且获取)的特性绑定(class和style除外)。当一个组件没有声明任何prop时,这里会包含所有父作用域的绑定(class和style除外),并且可以通过v-bind=”$attrs”传入内部组件——在创建高级别的组件时非常有用。简单点讲就是包含了所有父组件在子组件上设置的属性(除了prop传递的属性、class和styl

    2022年10月10日
    0
  • sqlserver之清空表内数据「建议收藏」

    sqlserver之清空表内数据「建议收藏」方法:—xxx为表名truncatetablexxx

    2022年5月28日
    28
  • cnpm安装和使用[通俗易懂]

    cnpm安装和使用[通俗易懂]在已经安装node.js基础上,利用npm来安装cnpm。cnpm是利用淘宝镜像来安装依赖包!优点:会比npm安装来的速度更快  操作:1、全局安装cnpm,打开cmd输入:npmi-gcnpm 2、验证是否安装成功,可以通过查看版本:cnpmversion当出现如下版本号,表示安装成功 …

    2022年10月10日
    0

发表回复

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

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