element vue 上传模板_vue+element 文件上传

一、前言

element ui 已经提供了文件上传的组件,直接拿来就能用。具有以下几个特点:

限制文件上传的个数,多个文件会发起多个请求。

可以设置文件选择后自动上传或者手动触发上传,并且手动触发可以自定义上传逻辑。

可以限制文件格式和大小,比如:jpeg等之类的。

设置缩略图模板。

控制文件列表

二、代码及注意事项

ref="upload"

action="" // 注意点一

:multiple="false"

:auto-upload="false" //注意点二

:limit="2" //注意点三

accept=".csv" //注意点四

:on-change="handleChange"

:before-upload="beforeUpload"

:http-request="submitFile" //注意点五

:file-list="fileList"

:on-exceed="onExceed" //注意点六

>

选取文件

只能上传csv文件

style="margin-left: 10px;"

type="success"

@click="selectFile" //注意点七

>提 交

关于el-upload 组件提醒以下几点点:

注意点一    action=""

此属性必填,值为上传路径url。

注意点二::auto-upload="false"

表明手动触发上传文件的行为,当 点击选择文件只是选择文件,当点击 提交 按钮时 才会真正的上传。

注意点三: :limit=2“”

限制文件上传个数为2

注意点四:accept=".csv"

当你选择文件时,默认在弹出框中过滤只显示.csv文件,当然你可以手动切换过滤的格式,仍然可以选择其他文件,

所以这种方法不能严格保证上传格式符合要求,需要在上传的时候再次校验。

注意点五::http-request="submitFile"

此属性只有在:auto-upload="false" 才会生效,表示手动触发时将会覆盖默认上传的逻辑,

同时action="url"也会失效。所以,你可以在 submitFile 方法里实现一些业务逻辑。比如,根据不同的参数选择不同的url上传。

注意点六::on-exceed="onExceed"

超过限制的文件数量时,回调的方法,可以给出提示。

三、问题及经验

下面说说我遇到的问题

1. 如何实现手动触发文件上传。

前面已经说了几个关键点:http-request,auto-upload, action

如果 :auto-upload=“false” 就是手动触发,进一步,如果 :http-request="submitFile" ,那么提交时将会覆盖默认的上传行为,走submitFile方法逻辑。贴下我的代码:

selectFile() {

if (this.fileObj == null) {

this.$message.error('请选择文件')

}

this.$refs.upload.submit()

console.log('发送文件..')

},

其中,this.$refs.upload.submit() 便会去调用自定义的submitFile方法。 注意哦,selectFile是 提交 按钮的事件。那真正的请求逻辑是submitFile,此时action=“url”也将失效。我采用了表单提交的方式,并且不同根据不同的参数,调用不同的url。

submitFile(item) {

this.fileObj = item.file

const formData = new FormData()

formData.append('file', this.fileObj)

if (this.type === 'USER') {

importUser(this.$store.state.user.id, formData)

}

if (this.type === 'ORG') {

importOrg(this.$store.state.user.id, formData)

}

},

2. 严格限制上传文件的格式:

前面说过可以用accept 属性,但是不能够严格保证,只是在文件选择时候根据文件后缀名进行过滤而已。所以,上传之前需要校验,在before-upload回调方法里进行逻辑处理:

beforeUpload(file) {

const iscsv = file.type === 'application/vnd.ms-excel'

if (!iscsv) {

this.$message.error('只支持csv格式的文件!')

}

return iscsv

},

那我怎么知道文件类型是什么??可以通过方法里面的file参数知道关于此文件的所有信息。此方法返回false,将不会上传,并丢弃此文件。

3. 只能上传一个文件,并且再次选择时候覆盖第一个文件。

limit="1" 可以限制只能上传一个文件,当再次选择文件时,将会触发 on-exceed 回调方法(如果你绑定了此方法),然后就结束后续操作了。不能满足需求。

实现方案1:

在on-exceed方法里提示用户,让用户先删除原来的文件列表,然后就可以再次上传新文件了。

onExceed(file, fileList) {

this.$message.error('只能上传一个文件,请先删除已有文件!')

},

第一个file参数,是当前选中的文件,第二个参数fileList为已经选中的文件列表。

实现方案二:

在用户选择时,默认删除第一个文件,这样无论上传多少个文件,都只会保留最后一次选择的文件。关键点:绑定handle-change 事件,将fileList中的第一个文件删除。代码如下:

handleChange(file, fileList) {

if (fileList.length > 1) {

this.$refs.upload.handleRemove(fileList[0])

}

console.log(fileList)

},

当采用这种方案时,页面上会有出现文件删除和增加的动画效果,个人觉得不是很好,因此,需要除去此效果,网上找寻一波,以下方法经受住了我的考验,和大家分享下:

/deep/ .el-list-enter-active,

/deep/ .el-list-leave-active {

transition: none;

}

/deep/ .el-list-enter,

/deep/ .el-list-leave-active {

opacity: 0;

}

以上便是在使用el-upload组件上传时的使用方法和心得,建议一定要好好阅读官方文档的实例,基本都能满足我们的需求。写的不详细的地方,一定要去看官网哦,文档都写了,睁大眼睛,传送带: https://element.eleme.cn/#/zh-CN/component/upload

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/289271.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

React Native之js调用Android原生使用Callback传递结果给js

如果不清楚js如何调用Android原生,可以先参考我的这篇博客React Native实现js调用安卓原生代码 1 问题 上面的文章只是调用安卓原生显示Toast,但是我们一般会需要调用安卓的代码然后去拿回结果给js,但是我们知道在android层js调用的这个函数返回值必须的void,所以我们需要用到…

ENVI帮助研究人员发现金矿

本文转自:http://www.esrichina-bj.cn/2012/0319/1663.html 遥感影像能让我们实时的获取地理区域的准确信息,这些为很多石油、天然气和矿产的开采提供关键的信息,节约实地测量的成本,提高工作效率。 美国圣路易斯大学的研究人员希…

ajax速度axio速度,[转]Ajax Fetch Axios之间的详细区别以及优缺点

jQuery ajax12345678$.ajax({type: POST,url: url,data: data,dataType: dataType,success: function (){},error: function (){}})优缺点:本身是针对mvc模式的编程,不符合现在mvvm的浪潮基于原生的XHR开发,XHR本身的架构不清晰,已…

C# 使用TCP创建HTTP客户程序

首先,创建一个控制台应用程序(包),向 Web 服务器发送一个 HTTP 请求。以前用 HttpClient 类实现了这个功能,但使用 TcpClient 类需要深入 HTTP 协议。HttpClientUsingTcp 示例代码使用了以下名称空间:System System.IO System.Net.Sockets …

Git之submodule使用总结

Git Submodule 可许可一个git仓库&#xff0c;作为另一个git仓库的子目录&#xff0c;保持父项目和子项目相互独立 1 添加仓库 git submodule add <仓库地址> <本地路径> 在父仓库根目录增加了.gitmodule文件 // 添加submodule字段 [submodule "submodule1&…

通读AFN①--从创建manager到数据解析完毕

流程梳理 今天开始会写几篇关于AFN源码解读的一些Blog&#xff0c;首先要梳理一下AFN的整体结构(主要是讨论2.x版本的Session访问模块)&#xff1a; 我们先看看我们最常用的一段代码&#xff1a; AFHTTPSessionManager *manager [AFHTTPSessionManager manager]; [manager GET…

学前教育试题库及答案_最新《学前教育学》专科-试题库及答案资料

精品文档精品文档学前教育学专科题库及答案一、单项选择题&#xff1a;(从下列各题备选答案中选出最适合的一个答案。共120题&#xff0c;每题1分)1——5DACBB 6——10DACDB 11——15ABDAC 16——20 BCDDC 21——25BBBCC26——30DCCAD 31——35DBBAB 36——40ACA…

python画4维图_用Python 画个六维图,涨姿势了

关注后你就是我的人了 我们的大脑通常最多能感知三维空间&#xff0c;超过三维就很难想象了。尽管是三维&#xff0c;理解起来也很费劲&#xff0c;所以大多数情况下都使用二维平面。来自维基百科 不过&#xff0c;我们仍然可以绘制出多维空间&#xff0c;今天就来用 Python 的…

[Windows]_[0基础]_[Release程序的崩溃报告minidump解决方式]

场景:1. Release的程序崩溃时&#xff0c;崩溃报告能够让开发者查明代码哪里出了问题&#xff0c;用处大大的。2. 仅仅实用VS的编译器才支持&#xff0c;所以MinGW就无缘了。3. 使用了未处理异常过滤处理函数.4. 生成的.dmp文件用zlib库压缩, 用到下面的ZipHelper类&#xff0c…

高考地理背熟这些知识可以拿80%的分数(1)

一、地理特征的描述 (一).区域自然地理特征的描述: 1、分析区域自然地理特征: 从地形、气候、水文、植被、河流、土壤、自然资源、自然灾害、自然(生态)环境等几方面入手。

CF Theatre Square

Theatre Square time limit per test2 secondsmemory limit per test64 megabytesinputstandard inputoutputstandard outputTheatre Square in the capital city of Berland has a rectangular shape with the size n  m meters. On the occasion of the citys anniversary,…

迅捷路由器 服务器无响应,如果路由器重启还是上不了网 几招搞定

如果网速很慢重启了路由器之后结果还是慢&#xff0c;而且甚至上不了网了那该怎么办。如果有这种情况原因其实有很多很多的可能&#xff0c;需要逐个排查&#xff0c;首先需要进入192.168.1.1路由器的管理设置界面&#xff0c;查看路由器的运行状态。路由器设置、路由器没有成功…

Azure DevOps 中 Dapr项目自动部署流程实践

注&#xff1a;本文中主要讨论 .NET6.0项目在 k8s 中运行的 Dapr 的持续集成流程, 但实际上不是Dapr的项目部署到K8s也是相同流程&#xff0c;只是k8s的yaml配置文件有所不同流程选择基于 Dapr 的项目持续集成包含以下流程编译并打包项目构建 Dockerfile,并推送镜像push image至…

matlab求kcf算法响应图_Kernelized Correlation Filters(KCF)算法

目前在online visual tracking这个领域&#xff0c;已经涌现出很多的跟踪算法&#xff0c;比较知名如TLD&#xff0c;Struck&#xff0c;OAB&#xff0c;CT等等。但是能做到非常快速而且效果还不错的相对就较少了&#xff0c;好多算法都是刚刚能实时&#xff0c;而且还是在图像…

React Native之js同步调用安卓原生方法@ReactMethod(isBlockingSynchronousMethod = true)

1 问题 之前的代码js调用安卓原生都是用的异步方法,比如callback, promiss,异步的话,我们一般是在安卓原生有耗时操作,才用异步,如果我要离开返回,就需要js调用安卓同步方法 利用callback实现js调用原生可以参考我的这篇博客 React Native实现js调用安卓原生代码 React Nat…

用POP动画引擎实现弹簧动画(POPSpringAnimation)

效果图: #import "ViewController.h" #import <POP.h>interface ViewController ()property (nonatomic, weak) UIView *testView;endimplementation ViewController- (void)viewDidLoad {[super viewDidLoad];self.view.backgroundColor [UIColor blackColor…

地理知识归纳:影响降水的九大因素

降水指大气中水汽凝结降落的过程,包括降雨、下雪、冰雹等形式,降水的多少要受很多因素的影响,但主要条件是三个:充足的水汽供应,气流上升达到过饱和状态,足够的凝结核。通常情况下,我们不需要考虑凝结核的问题,只是考虑有没有充足的水汽和促使气流上升的机制就可以,归…

linux 查看cpu_作为高级Java,你应该了解的Linux知识

作为一个javaer&#xff0c;我以前写过很多关于Linux的文章。但经过多年的观察&#xff0c;发现其实对于大部分人&#xff0c;有些东西压根就用不着。用的最多的&#xff0c;就是到线上排查个问题而已&#xff0c;这让人很是苦恼。那么&#xff0c;我们就将范围再缩小一下。最有…

uva-10305-水题-拓扑排序

uva-10305-水题-拓扑排序 输入n,m,n代表点数,m代表边数(i,j),排序时i在j前面,没出现的点随意排 #include <iostream> #include<stdio.h> #include<math.h> #include<memory.h> using namespace std;const int maxNum 120; int a, b; int map[maxNum][…

layer和3D仿射变换

1、视图的显示基于图层&#xff0c;通过控制图层同样能控制显示效果&#xff0c;获取当前的视图的layer,并为其增加圆角边框。 //设置layer边框的宽度为2view.layer.borderWidth2;//如果需要为layer添加颜色需要转换为CGColor对象view.layer.borderColor[UIColor greenColor].C…