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就是这层判断:

以下是判断删除的方法:

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

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

原文地址:https://www.cnblogs.com/fmixue/p/9968910.html

时间: 2024-10-04 17:41:17

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

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

需求:上传文件的时候,需要携带其他的参数 问题:使用upload上传文件时,必须使用formData对象,而其他的参数通过data获取的到的,formData和data是不能同时传输的 解决:获取到的data数据,使用formData.append()方法添加上就可以啦,然后把整个formData传给后台就可以了 比如后台需要三个参数 :file .platformName.reconciliationData let formData = new FormData(); formData.ap

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

1.需要实现的效果如下图,在点击提交的时候再提交file数据,和其他数据统一上传,我把file转换成了base64的格式,可以再上传之前显示缩略图 2.代码分析 action属性值为"#" 增加了:http-request="httpRequest"方法 解释: http-request  覆盖默认的上传行为,可以自定义上传的实现 <template> <div> <el-upload class="avatar-upload

vue+axios+elementUI文件上传与下载

vue+axios+elementUI文件上传与下载 Simple_Learn 关注 0.5 2018.05.30 10:20 字数 209 阅读 15111评论 4喜欢 6 1.文件上传 这里主要介绍一种,elementUI官网 上传组件 http-request 这种属性的使用. 图片.png 代码如下: <el-upload class="uploadfile" action="" :http-request='uploadFileMethod' :sh

selenium -文件上传的实现 -对于含有input element的上传

一.对于上传文件, 从手动操作我们可以看出, 需要对window 窗体进行操作, 而对于selenium webdriver 在这方面应用就受到了限制. 但是, 庆幸的是, 对于含有input element的上传, 我们可以直接通过sendkeys来传入文件路径,省略了对window 窗体的操作来实现文件上传, 具体实现过程如下: 1)找到上传控件element,并输入路径: WebElement element = driver.findElement(By.id("cloudFax-att

UI标签库专题四:JEECG智能开发平台 Upload(上传标签)

?? 1. Upload(上传标签) 1.1.  参数 属性名 类型 描述 是否必须 默认值 id string 上传控件唯一标示 是 null name string 控件name 是 null formData string 上传文件提交后台的其他表单参数取ID 否 null uploader string 上传提交路径 是 null extend string 上传文件扩展名(可选类型组1,pic[*.jpg;*,jpeg;*.png;*.gif;*.bmp;*.ico;*.tif],2,

UI标签库专题四 JEECG智能开发平台 Upload 上传标签

1. Upload(上传标签) 1.1.  参数 属性名 类型 描述 是否必须 默认值 id string 上传控件唯一标示 是 null name string 控件name 是 null formData string 上传文件提交后台的其他表单参数取ID 否 null uploader string 上传提交路径 是 null extend string 上传文件扩展名(可选类型组1,pic[*.jpg;*,jpeg;*.png;*.gif;*.bmp;*.ico;*.tif],2,off

AJAX上传multipart/form-data类型参数时,后台无法接收的解决方案

前台使用AJAX上传multipart/form-data类型参数时,后台接收到的值全是NULL,这有以下几个原因: 1.变量名称没有一一对应. 解决方案:检查前上传的name和后台的entity名称是否一样. 2.没有在Spring配置文件中添加如下配置: <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"

Nginx的Upload上传模块

前段时间做一个项目,需要上传文件,差不多需要20M左右,普通用php处理会比较麻烦,经常超时,而且大量占用资源.于是搜索了下,决定用nginx的upload上传模块来处理. 你可以在这里:http://www.grid.net.ru/nginx/upload.en.html 获取源码.下载以后需要重新编译nginx 1 2 3 ./configure –add-module=/usr/local/nginx_upload_module-* make make install 重启nginx即可以

android post方式上传文件(模拟表单格式数据提交)

表单提交内容为: POST /upload.php?zp_id=ab46ca6d703e3a1580c1c9b8b3a8fb39 HTTP/1.1Accept: image/gif, image/jpeg, image/pjpeg, image/pjpeg, application/x-ms-application, application/x-ms-xbap, application/vnd.ms-xpsdocument, application/xaml+xml, application/v