vue中el-upload上传多图片且携带参数,批量而不是一张一张的解决方案
现在前端基本不是vue技术栈就是react技术栈。
vue技术栈最常用的就是element-ui的ui框架了。
在项目中,我们经常会碰到这种需求:批量上传文件
element-ui 确实也为我们提供了<el-upload>这样的组件,同事也暴露了很多的属性和方法供我们使用。
但是很多人却碰到了这样的问题:项目需求是批量上传,但是为什么自己上传的时候,也成功了,但是却是一张一张上传的,这种上传方式有时候并不违背我们的需求,但有时又不是我们需要的。那么,怎么解决批量上传并携带参数呢,我这里写了一个demo,
可供大家参考:
<template>
<div>
<el-form>
<el-form-item>
<el-upload
ref="upload"
action="/as"
multiple
:http-request="handleUpload"
:auto-upload="false"
:limit="20">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handlePush">发布</el-button>
</el-form-item>
</el-form> </div>
</template>
<script>
import axios from 'axios'
import { mapGetters } from 'vuex'
export default{
data() {
return {
files:[]
};
},
computed:{
...mapGetters([
'taxno',
'username'
])
},
methods: {
handleUpload(raw){
this.files.push(raw.file);
},
async handlePush(){
this.$refs.upload.submit() // 这里是执行文件上传的函数,其实也就是获取我们要上传的文件
let fd = new FormData();
fd.append('operator',this.username)
fd.append('reimment',"倪楚楚")
fd.append('deptname',"技术部")
fd.append('taxno',this.taxno)
this.files.forEach(function (file) {
fd.append('file', file, file.name); // 因为要上传多个文件,所以需要遍历一下才行
//不要直接使用我们的文件数组进行上传,你会发现传给后台的是两个Object
})
axios.post(process.env.BASE_API+'/file/moreFileUpload',fd).then(res=>{
if(res.data.status==='OK'){
console.log(res)
}
})
}
}
}
</script>
因为<el-upload>的action属性是必须的,所以如果不用默认上传,这里随便设置一个字符串就可以了。
如果对携带的参数做校验,可以用表单校验。当校验通过了再调上传的接口就可以了。
希望这篇文章对你有所帮助!
转载请注明出处:砌墙的砖 博客园 2019-07-30 《vue中el-upload上传多图片且携带参数,批量而不是一张一张的解决方案》
vue中el-upload上传多图片且携带参数,批量而不是一张一张的解决方案的更多相关文章
- POST请求上传多张图片并携带参数
POST请求上传多张图片并携带参数 在iOS中,用POST请求携带参数上传图片是非常恶心的事情,HTTPBody部分完全需要我们自己来配置,这个HTTPBody分为3个部分,头部分可以携带参数,中间部 ...
- vue中element 的上传功能
element 的上传功能 最近有个需求,需要在上传文件前,可以进行弹窗控制是否上传upload 看完文档后,感觉有两种思路可以实现 基于before-upload :上传文件之前的钩子,参数为上传的 ...
- vue中的文件上传和下载
文件上传 vue中的文件上传主要分为两步:前台获取到文件和提交到后台 获取文件 前台获取文件,主要是采用input框来实现 <el-dialog :title="addName&quo ...
- 封装Vue Element的upload上传组件
本来昨天就想分享封装的这个upload组件,结果刚写了两句话,就被边上的同事给偷窥上了,于是在我全神贯注地写分享的时候他就神不知鬼不觉地突然移动到我身边,腆着脸问我在干啥呢.卧槽你妈,当场就把我吓了一 ...
- Vue中删除重复上传的文件
上传控件: <el-upload class="upload-demo" :on-change="filesChange"> filesChang ...
- ivew Upload 上传时附带的额外参数
<Upload action="/api/device/importData" :data="uploadData" :before-upload=&qu ...
- MVC应用程序显示上传的图片
MVC应用程序显示上传的图片 前两篇<MVC应用程序实现上传文件>http://www.cnblogs.com/insus/p/3590907.html和<MVC应用程序实现上传文件 ...
- 页面中使用多个element-ui upload上传组件时绑定对应元素
elemet-ui里提供的upload文件上传组件,功能很强大,能满足单独使用的需求,但是有时候会存在多次复用上传组件的需求,如下图的样子,这时候就出现了问题,页面上有多个上传组件时,要怎么操作呢? ...
- vue : 检测用户上传的图片的宽高
需求: 用户可上传3-6张图片(第 1 2 3 张必须传),上传的图片必须是540 * 330 像素. 第一步,获取上传的图片的宽高. 初始化一个对象数组,宽高均设为0. 如果用户上传的图片没有上限, ...
随机推荐
- C++按格式接收输入字符(京东,滴滴,360笔试必用)
头一次起这种标题,为了对得起这个标题,我尽量多写点~ 最近还是一边实习一遍投简历--笔试--面试,然而发现了自己的好多问题. 在答了京东笔试(滴滴,360也是这样的)的题后,发现与腾讯,阿里等公司的不 ...
- 高并发 Nginx+Lua OpenResty系列(1)——环境搭建
OpenResty是一款基于Nginx的高性能负载均衡服务器容器,简单来说是Nginx+Lua.结合了Lua语言来对Nginx进行扩展,使得在Nginx上具有web容器功能. OpenResty运行环 ...
- spring boot 2.x 系列 —— spring boot 整合 servlet 3.0
文章目录 一.说明 1.1 项目结构说明 1.2 项目依赖 二.采用spring 注册方式整合 servlet 2.1 新建过滤器.监听器和servlet 2.2 注册过滤器.监听器和servlet ...
- java基础知识总结(一)
满满的干货=-= (一)环境变量的作用: 每个人刚开始学习java的时候,肯定都是安装JDK,配置环境变量,怎么配置网上教程很多很多,但是为什么这么配置呢? 我配置的环境变量: JAVA_HOME:C ...
- Java字符串String类操作方法详细整理
关于String类的基本操作,可分为以下几类: 1.基本操作方法 2.字符串比较 3.字符串与其他数据类型之间的转换 4.字符与字符串的查找 5.字符串的截取与拆分 6.字符串的替换与修改 我觉得在整 ...
- IAR for STM8的简介、下载、安装及注册教程
一.简介 1.关于IAR for STM8 IAR for STM8 是一个嵌入式工作平台,主要应用于STM8 系列芯片的开发,现在(2018年3.10版本)能够支持市面上所有的STM8芯片. 个人认 ...
- vs 编译说明
静态编译/MT,/MTD 是指使用libc和msvc相关的静态库(lib). 动态编译,/MD,/MDd是指用相应的DLL版本编译. 其中字母含义 d:debug m:multi-th ...
- java Http工具类
import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import ...
- scrapy基础知识之 关于爬虫部分一些建议:
1.尽量减少请求次数,能抓列表页就不抓详情页,减轻服务器压力,程序员都是混口饭吃不容易. 2.不要只看 Web 网站,还有手机 App 和 H5,这样的反爬虫措施一般比较少. 3.实际应用时候,一般防 ...
- zookeeper的客户端应用
什么zookeeper? ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件.它是一个为分布式应用提供 ...