文件上传这种业务需求很常见,但是最近用了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格式)的更多相关文章

  1. vue中element 的上传功能

    element 的上传功能 最近有个需求,需要在上传文件前,可以进行弹窗控制是否上传upload 看完文档后,感觉有两种思路可以实现 基于before-upload :上传文件之前的钩子,参数为上传的 ...

  2. vue element upload上传、清除等

    如果项目中可以使用file-list,那我们可以点击file-list删除文件列表: 有时候项目中是不要这个文件列表的,所以在上传成功以后,文件列表一直存在,要重新上传就必须刷新页面,所以我们需要手动 ...

  3. element upload上传前对文件专门bs64上传

    <!-- 文件上传 --> <template> <section class="file-upload"> <p class=" ...

  4. 封装Vue Element的upload上传组件

    本来昨天就想分享封装的这个upload组件,结果刚写了两句话,就被边上的同事给偷窥上了,于是在我全神贯注地写分享的时候他就神不知鬼不觉地突然移动到我身边,腆着脸问我在干啥呢.卧槽你妈,当场就把我吓了一 ...

  5. upload 上传 加token 在 :headers='headers' 注意 不要直接写$refs.upload.headers = {} 这样vue会警告 修改组件内部变量

    upload 上传 加token 在 :headers='headers' 注意 不要直接写$refs.upload.headers = {} 这样vue会警告 修改组件内部变量 <Upload ...

  6. element-ui upload上传文件并携带参数 使用formData对象

    需求:上传文件的时候,需要携带其他的参数 问题:使用upload上传文件时,必须使用formData对象,而其他的参数通过data获取的到的,formData和data是不能同时传输的 解决:获取到的 ...

  7. 使用Element的upload上传组件,不使用action属性上传

    1.需要实现的效果如下图,在点击提交的时候再提交file数据,和其他数据统一上传,我把file转换成了base64的格式,可以再上传之前显示缩略图 2.代码分析 action属性值为"#&q ...

  8. element-ui Upload 上传组件源码分析整理笔记(十四)

    简单写了部分注释,upload-dragger.vue(拖拽上传时显示此组件).upload-list.vue(已上传文件列表)源码暂未添加多少注释,等有空再补充,先记下来... index.vue ...

  9. vue之element-ui文件上传

    vue之element-ui文件上传 文件上传需求 ​ 对于文件上传,实际项目中我们的需求一般分两种: 对于单个的文件上传,比如拖动上传个图片之类的,或者是文件. 和表单一起实现上传(这种情况一般都是 ...

随机推荐

  1. 还能不能愉快地起一个web服务啦?——1st Step!白话http和代码交互的那点儿事儿~

    学写python的时候,我们多多少少都接触到了web程序,然而你有没有想过,当浏览器发送了一个http请求时,等待接收这个请求的后端代码是一种什么样的思想感情? 就像下面这张图里画的一样,后端也许是一 ...

  2. 《BUG创造队》第一次作业:团队亮相

    项目 内容 这个作业属于哪个课程 2016级软件工程 这个作业的要求在哪里 第五次实验 团队名称 BUG创造队 作业学习目标 通过本次项目了解并熟悉团队开发的过程 关于我们 -我们的队名:BUG创造队 ...

  3. 【转】PO/POJO/BO/DTO/VO的区别

      PO :persistent object持久对象 1 .有时也被称为Data对象,对应数据库中的entity,可以简单认为一个PO对应数据库中的一条记录. 2 .在hibernate持久化框架中 ...

  4. PAT 1116 Come on! Let's C

    1116 Come on! Let's C (20 分)   "Let's C" is a popular and fun programming contest hosted b ...

  5. cmd命令往MySQL数据库提交数据

    第一步:MySQL -V检查下载成功否第二步:mysql -u root -p 登陆密码第三步:创建一个数据库 create database if not exists 数据库name: 第四步:展 ...

  6. 322. Coin Change零钱兑换

    网址:https://leetcode.com/problems/coin-change/ 典型的动态规划问题,类比背包问题,这就是完全背包问题 问题的阶段:对数值 i 凑硬币 问题的状态:对数值 i ...

  7. react和vue的不同

    React严格上只针对MVC的view层,Vue则是MVVM模式 virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.而对于React而言,每当应用的状态被改变时 ...

  8. js前端性能优化之函数节流和函数防抖

    前言:针对一些会频繁触发的事件如scroll.resize,如果正常绑定事件处理函数的话,有可能在很短的时间内多次连续触发事件,十分影响性能 节流: 节流:使得一定时间内只触发一次函数. 它和防抖动最 ...

  9. C#异步(下)

    上篇主要分析了async\await之前的一些异步模式,今天说异步的主要是指C#5的async\await异步.在此为了方便的表述,我们称async\await之前的异步为“旧异步”,async\aw ...

  10. React 的组件与 this.props对象

    1.组件 React 允许将代码封装成组件,然后像插入普通 HTML 标签一样,在网页中插入这个组件.React.createClass 的方法就是用于生成一个组件类. 2.this.props对象 ...