vue-resource+element upload上传(遇到formData总是变为object格式)
文件上传这种业务需求很常见,但是最近用了element,仔细看了文档,按照demo写了上传,与后台传参调取接口时,控制台总是显示未获取到文件,想了又想,发现一开始思路就跑遍了。。。
写此博记录下遇到的问题。
传参给后台需要formdata格式的,这种格式也很常见,如下:
// FormData 对象
var form = new FormData();
// 文件对象
form.append("file", fileObj);
// 其他参数
form.append("xxx", xxx);
但是有一点,我发现我怎么传,控制台始终都是这样,如下截图:(估计你们都比我聪明。。此处想打自己一下!!
)


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

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

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

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

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

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

以下是判断删除的方法:

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

记录下这次的坑,希望以后长点心;
vue-resource+element upload上传(遇到formData总是变为object格式)的更多相关文章
- vue中element 的上传功能
element 的上传功能 最近有个需求,需要在上传文件前,可以进行弹窗控制是否上传upload 看完文档后,感觉有两种思路可以实现 基于before-upload :上传文件之前的钩子,参数为上传的 ...
- vue element upload上传、清除等
如果项目中可以使用file-list,那我们可以点击file-list删除文件列表: 有时候项目中是不要这个文件列表的,所以在上传成功以后,文件列表一直存在,要重新上传就必须刷新页面,所以我们需要手动 ...
- element upload上传前对文件专门bs64上传
<!-- 文件上传 --> <template> <section class="file-upload"> <p class=" ...
- 封装Vue Element的upload上传组件
本来昨天就想分享封装的这个upload组件,结果刚写了两句话,就被边上的同事给偷窥上了,于是在我全神贯注地写分享的时候他就神不知鬼不觉地突然移动到我身边,腆着脸问我在干啥呢.卧槽你妈,当场就把我吓了一 ...
- upload 上传 加token 在 :headers='headers' 注意 不要直接写$refs.upload.headers = {} 这样vue会警告 修改组件内部变量
upload 上传 加token 在 :headers='headers' 注意 不要直接写$refs.upload.headers = {} 这样vue会警告 修改组件内部变量 <Upload ...
- element-ui upload上传文件并携带参数 使用formData对象
需求:上传文件的时候,需要携带其他的参数 问题:使用upload上传文件时,必须使用formData对象,而其他的参数通过data获取的到的,formData和data是不能同时传输的 解决:获取到的 ...
- 使用Element的upload上传组件,不使用action属性上传
1.需要实现的效果如下图,在点击提交的时候再提交file数据,和其他数据统一上传,我把file转换成了base64的格式,可以再上传之前显示缩略图 2.代码分析 action属性值为"#&q ...
- element-ui Upload 上传组件源码分析整理笔记(十四)
简单写了部分注释,upload-dragger.vue(拖拽上传时显示此组件).upload-list.vue(已上传文件列表)源码暂未添加多少注释,等有空再补充,先记下来... index.vue ...
- vue之element-ui文件上传
vue之element-ui文件上传 文件上传需求 对于文件上传,实际项目中我们的需求一般分两种: 对于单个的文件上传,比如拖动上传个图片之类的,或者是文件. 和表单一起实现上传(这种情况一般都是 ...
随机推荐
- WPF中定时器与进度条的配合使用
WPF中定时器使用的注意事项: WPF需要使用System.Windows.Threading.DispatcherTimer定时器,而不能使用System.Timers.Timer定时器.因为Sys ...
- struts1与struts2的区别。
1) 两个框架都是MVC的WEB框架, 2) struts1是老牌框架,应用很广泛,有很好的群众基础,使用它开发风险很小,成本低,Struts2核心设计思想主要源自Webwork,实现更优雅,更容易扩 ...
- 【算法】祭奠spfa 最短路算法dijspfa
题目链接 本题解来源 其他链接 卡spfa的数据组 题解堆优化的dijkstra 题解spfa讲解 来自以上题解的图片来自常暗踏阴 使用前向星链表存图 直接用队列优化spfa struct cmp { ...
- [record]WebLogic域之创建-文本界面
WebLogic域的创建方式主要有图形界面.文本方式(字符界面).脚本方式(WLST脚本)等,本文用文本方式来创建域. 一.启动Configuration Wizard •config.cmd/con ...
- 常用算法的python实现
1.乘法表 #! -*- coding:utf-8 -*- for i in range(1,10): for j in range(1,i+1): print('%d*%d=%d\t' % (i, ...
- 梳理:python—同一个类中的方法调用
为什么突然在此提到这个梳理问题呢? 因为在自己实践综合练习学过的知识时,突然觉得有些知识点的运用总是不成功,于是翻过课本进行回顾,总是觉得是对的,可是当再进一步思考“既然是对的,为什么在程序中总是不成 ...
- postman安装
安装包下载下来,解压缩到你喜欢的位置. 打开 Chrome 浏览器的「扩展程序」 点击「加载已解压的扩展程序...」按钮,找到你刚刚下载的安装包的位置,点击确定. 你去看看 Windows 的开始菜单 ...
- WEEK1
#变量 var1: name = input('name:') age = input('age:) job = input('job:) salary = input('salary:) info ...
- elment重置表格行高,hover效果
来源网络,做个笔记.表头行高.el-table__header tr, .el-table__header th { padding: 0; height: 50px; }表体行高 .el-table ...
- spark提交jar包时出现unsupported major.minor version 52.0错误的解决方案
一.问题: 最近在spark集群上做一个项目,打包提交jar包时,出现了unsupported major.minor version 52.0的报错,而在local模式运行却能正常运行! 二.错误原 ...