在vue项目中使用element-ui的Upload上传组件
<el-upload
v-else
class='ensure ensureButt'
:action="importFileUrl"
:data="upLoadData"
name="importfile"
:onError="uploadError"
:onSuccess="uploadSuccess"
:beforeUpload="beforeAvatarUpload"
>
<el-button size="small" type="primary">确定</el-button>
其中importFileUrl是后台接口,upLoadData是上传文件时要上传的额外参数,uploadError是上传文件失败时的回掉函数,uploadSuccess是文件上传成功时的回掉函数,beforeAvatarUpload是在上传文件之前调用的函数,我们可以在这里进行文件类型的判断。
data () {
importFileUrl: 'http:dtc.com/cpy/add',
upLoadData: {
cpyId: '123456',
occurTime: '2017-08'
}
},
methods: {
// 上传成功后的回调
uploadSuccess (response, file, fileList) {
console.log('上传文件', response)
},
// 上传错误
uploadError (response, file, fileList) {
console.log('上传失败,请重试!')
},
// 上传前对文件的大小的判断
beforeAvatarUpload (file) {
const extension = file.name.split('.')[1] === 'xls'
const extension2 = file.name.split('.')[1] === 'xlsx'
const extension3 = file.name.split('.')[1] === 'doc'
const extension4 = file.name.split('.')[1] === 'docx'
const isLt2M = file.size / 1024 / 1024 < 10
if (!extension && !extension2 && !extension3 && !extension4) {
console.log('上传模板只能是 xls、xlsx、doc、docx 格式!')
}
if (!isLt2M) {
console.log('上传模板大小不能超过 10MB!')
}
return extension || extension2 || extension3 || extension4 && isLt2M
}
}
在vue项目中使用element-ui的Upload上传组件的更多相关文章
- 页面中使用多个element-ui upload上传组件时绑定对应元素
elemet-ui里提供的upload文件上传组件,功能很强大,能满足单独使用的需求,但是有时候会存在多次复用上传组件的需求,如下图的样子,这时候就出现了问题,页面上有多个上传组件时,要怎么操作呢? ...
- 在Vue项目中使用Element UI:按需引入和完整引入
下面操作在main.js文件中进行 完整引入: import Element from 'element-ui'; //样式文件,需单独引入 import 'element-ui/lib/theme- ...
- vue项目中使用element ui上传图片到七牛
1.获取token值 后台有接口调用直接返回token值 //请求后台拿七牛云token async getQiniuToken() { //token let uploadtoken = await ...
- 封装Vue Element的upload上传组件
本来昨天就想分享封装的这个upload组件,结果刚写了两句话,就被边上的同事给偷窥上了,于是在我全神贯注地写分享的时候他就神不知鬼不觉地突然移动到我身边,腆着脸问我在干啥呢.卧槽你妈,当场就把我吓了一 ...
- vue项目中设置全局引入scss,使每个组件都可以使用变量
在Vue项目中使用scss,如果写了一套完整的有变量的scss文件.那么就需要全局引入,这样在每个组件中使用. 可以在mian.js全局引入,下面是使用方法. 1: 安装node-sass.sass- ...
- vue问题三:element ui的upload组件上传图片成功和移除事件
element ui的upload组件上传图片成功和移除事件: 登录后获取到后台传的token存到中: sessionStorage.setItem("token",data.ob ...
- element ui实现手动上传文件,且只能上传单个文件,并能覆盖上传。
element ui提供了成熟的组件场景,但实际工作中难免会遇到认(sha)真(diao)的产品.比如,最近遇到的,要求实现手动上传特定格式文件(用户点击“上传文件”按钮,确定之后,只是单纯选择了文件 ...
- Vue+Element UI 实现视频上传
一.前言 项目中需要提供一个视频介绍,使用户能够快速.方便的了解如何使用产品以及注意事项. 前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传AP ...
- 在ASP.NET项目中使用CKEditor +CKFinder实现图片上传功能
前言 之前的项目中一直使用的是FCKeditor,昨天突然有个想法:为什么不试一下新的CKEditor呢?于是花了大半天的时间去学习它的用法,现在把我的学习过程与大家分享一下. 谈起FCKeditor ...
- vue开发中vue-resource + canvas 图片压缩、上传、预览
1.使用vue-resource上传,也可以自定义ajax上传: 2.使用<input type="file" @change="submit()" na ...
随机推荐
- 【Struts2】简介及入门
一.概述 二.Struts2 快速入门程序 2.1 开发流程比较 2.2 引入依赖 2.2 创建jsp页面 2.3 在web.xml中配置前端控制器 2.4 创建struts.xml配置文件 2.4 ...
- 在线预览word、excel文件
直接使用微软提供的在线预览服务. 免费 文件必须为网可访问地址,因为微软的服务器需要访问该文件
- STM32TIM定时器的影子寄存器
1.简介 在STM32基本定时器的PSC预分频寄存器和ARR自动装载寄存器都有影子寄存器. 我们可以看到基本定时器功能框图上对应的寄存器有影子~ 2.功能 影子寄存器的存在起到一个缓冲的作用. 设置影 ...
- LNMP安装与配置之Nginx
Nginx简介 Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器,同时也提供了IMAP/POP3/SMTP服务.Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Ramb ...
- Mybatis入门配置及第一个Mybatis程序
目的:使用mybatis来进行对数据库表的操作 第一步:引入jar包 我这里是创建的maven工程 第二步:创建数据表user 第三步:创建实体类 实体类放在包 com.xxx.pojo 下,包名可自 ...
- cifs
加入cifs 能把设备的目录挂载到我们的电脑上面 mount -t cifs -o username=Everyone //192.168.23.72/cifs /cif 如果当前是everyone ...
- Sleep-Join方法理解
package cn.mayday.test; public class JoinTest { public static void main(String[] args) { try { int c ...
- 【Linux】解决用vi修改文件,保存文件时,提示“readonly option is set”
当在终端执行sudo命令时,系统提示“hadoop is not in the sudoers file”: 其实就是没有权限进行sudo,解决方法如下(这里假设用户名是cuser): 1.切换到超级 ...
- 第一份c语言作业
2.1 你对软件工程专业或者计算机科学与技术专业了解是怎样? •答案: 软件工程专业是个年轻的专业,紧跟这个信息化的新时代.我学习它是因为感兴趣,经过一周的学习,我了解了一些 该专业课程主要是c语言程 ...
- .net 密码明文传输 加密传递方法
未加密传递是这样的 html标签加密使用的是jquery.md5.js 自行官网下载 html代码 <head runat="server"> <meta ht ...