vue-resource+element upload上传(遇到formData总是变为object格式)

摘要:
文件上传是常见的业务需求。控制台始终显示未获取任何文件,//文件对象form.append(“file”://其他参数form.apped(“xxx”)。后来,发现元素中的上载是在组件中定义的。你再也不需要写帖子了!也不需要定义formData格式!操作是后请求的路径。单击上载按钮时,可以调用本地文件。单击弹出框中的“确定”按钮后,可以将其上载到服务器。

文件上传这种业务需求很常见,但是最近用了element,仔细看了文档,按照demo写了上传,与后台传参调取接口时,控制台总是显示未获取到文件,想了又想,发现一开始思路就跑遍了。。。

写此博记录下遇到的问题。

传参给后台需要formdata格式的,这种格式也很常见,如下:

// FormData 对象

var form = new FormData();

// 文件对象

form.append("file", fileObj);

// 其他参数

form.append("xxx", xxx);

但是有一点,我发现我怎么传,控制台始终都是这样,如下截图:(估计你们都比我聪明。。此处想打自己一下!!

vue-resource+element upload上传(遇到formData总是变为object格式)第1张

vue-resource+element upload上传(遇到formData总是变为object格式)第2张

然后找了半天没发现为什么,后来发现element里的上传是组件里已经定义好的,不用再去写post请求,formData格式也不用定义。。。

vue-resource+element upload上传(遇到formData总是变为object格式)第3张

 官网文档写得很详细,action就是post请求的路径,字符串格式,headers是头部,data为其他附加参数;

以下是我们的业务需求:

vue-resource+element upload上传(遇到formData总是变为object格式)第4张

我们业务逻辑是这样,弹框内部有个上传按钮,点击上传按钮时去调取本地文件,等到点击弹框的确定按钮之后才会上传到服务器,然后代码如下:

vue-resource+element upload上传(遇到formData总是变为object格式)第5张

data是这样定义的,需要自己设置X-token:

 vue-resource+element upload上传(遇到formData总是变为object格式)第6张

这是点击弹框的确定按钮执行的方法,通过submit()方法,很简单:

vue-resource+element upload上传(遇到formData总是变为object格式)第7张

这个是判断文件格式是否符合规范,很多人在before-upload这个方法里判断这些,但是你会发现有个问题,就是你执行此方法时无论上传格式是否正确们都会触发before-remove或者是on-remove这两个方法,很奇怪,可能是element组件的bug,所以需要加个判断,以下图中的isDel就是这层判断:

vue-resource+element upload上传(遇到formData总是变为object格式)第8张

以下是判断删除的方法:

vue-resource+element upload上传(遇到formData总是变为object格式)第9张

 还有就是上传成功后的逻辑处理:

vue-resource+element upload上传(遇到formData总是变为object格式)第10张

记录下这次的坑,希望以后长点心;

免责声明:文章转载自《vue-resource+element upload上传(遇到formData总是变为object格式)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇freeswitch 使用info显示的通道变量winform学习(1)初识winform下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

10.折线连接--从零起步实现基于Html5的WEB设计器Jquery插件(含源码)

前面章节已讲到如何在两个组件间通过曲线(贝塞尔曲线)进行连接,一般在实际应用中,贝塞尔曲线在数据流图、思维导图中应用比较多,许多如组织架构图等通过折线连接,本文在之前的基础上如何快速实现两个组件间的折线连接: 之前示例是用checkbox来指示是否画线状态,现在增加了一种线条所以需要修改一下用三种状态来识别是选择/曲线/折线之一,index.html中代...

WebStorm-2019.1.3破解方法

在此处下载对应的安装包https://www.jetbrains.com/webstorm/download/other.html 下载相应的jar包和破解码:https://github.com/servantdragon/webstrom-.git 把里面的JetbrainsIdesCrack-4.2-release-sha1-3323d5d0b82...

eclipse导入maven项目有红叉及pom.xml出错的问题的解决

导入我们的项目的时候总会出现很多红叉,看着很难受,其实可以解决的(本人使用方法一解决)解决方法:1、先build project,然后右键项目->maven->update projectpom还是有问题就到这个目录,打开命令行,mvn clean->mvn eclipse:clean->mvn eclipse:eclipse 基本...

Node.js入门:文件查找机制

文件查找流程图 从文件模块缓存中加载     尽管原生模块与文件模块的优先级不同,但是都不会优先于从文件模块的缓存中加载已经存在的模块。 从原生模块加载     原生模块的优先级仅次于文件模块缓存的优先级。require方法在解析文件名之后,优先检查模块是否在原生模块列表中。以http模块为例,尽管在目录下存在一个http/http.js/http....

Android Studio 多渠道打包

什么是Gradle  Gradle是一种依赖管理工具,基于Groovy语言,面向Java应用为主,它抛弃了基于XML的各种繁琐配置,取而代之的是一种基于Groovy的领域特定(DSL)语言。Android Studio中新建项目成功后自动下载Gradle。 Gradle有几个基本组件: 1.整个项目的gradle配置文件build.gradle // T...

WorkBench3.2 + VxWorks6.8安装教程

写在前面: 非常感谢原文章作者,写得非常详细————https://blog.csdn.net/qq_35192280/article/details/85268313 下面是我自己在安装过程中遇到的问题及解决方法,其他部分完全可以按照原创作者来操作 开始的开始,先下载好原文章提供的文件,如果失效可以再给我留言,我也有保存。 1.这是最后安装好的样子 2....