在vue项目中使用element-ui的Upload上传组件的示例


Posted in Javascript onFebruary 08, 2018

本文介绍了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作为前端框架做自己的项目,在做到需要上传文件到服务器时,同事告诉我upload之中的action也就是上传地址不能动态的去更改,然后去看了一下,需要做以下处理才能动态的使用:

action是一个必填参数,且其类型为string,我们把action写成:action,然后后面跟着一个方法名,调用方法,返回你想要的地址,代码示例:

//html 代码
<el-upload :action="UploadUrl()" :on-success="UploadSuccess" :file-list="fileList">
  <el-button size="small" type="primary" >点击上传</el-button>
  <div slot="tip" class="el-upload__tip"></div>
</el-upload>
// js 代码在 methods中写入需要调用的方法
methods:{
  UploadUrl:function(){
    return "返回需要上传的地址";   
  }  
}

这是我解决的方法,希望能帮到需要的人

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
超越Jquery_01_isPlainObject分析与重构
Oct 20 Javascript
基于jQuery的获取标签名的代码
Jul 16 Javascript
商城常用滚动的焦点图效果代码简单实用
Mar 28 Javascript
JS控制文本框textarea输入字数限制的方法
Jun 17 Javascript
JavaScript 语言基础知识点总结(思维导图)
Nov 10 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
Jan 06 Javascript
jquery实现简单的轮换出现效果实例
Jul 23 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
Aug 24 Javascript
label+input实现按钮开关切换效果的实例
Aug 16 Javascript
vue.js  父向子组件传参的实例代码
Oct 29 Javascript
node.JS路径解析之PATH模块使用方法详解
Feb 06 Javascript
vue中实现methods一个方法调用另外一个方法
Feb 08 #Javascript
使用vux实现上拉刷新功能遇到的坑
Feb 08 #Javascript
jQuery实现的简单图片轮播效果完整示例
Feb 08 #jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 #jQuery
AnglarJs中的上拉加载实现代码
Feb 08 #Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 #Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
Feb 08 #Javascript
You might like
php实现比较两个字符串日期大小的方法
2015/05/12 PHP
php获取汉字拼音首字母的方法
2015/10/21 PHP
yii2实现分页,带搜索的分页功能示例
2017/01/07 PHP
CodeIgniter框架钩子机制实现方法【hooks类】
2018/08/21 PHP
js 数组实现一个类似ruby的迭代器
2009/10/27 Javascript
JQuery AJAX提交中文乱码的解决方案
2010/07/02 Javascript
js汉字转拼音实现代码
2013/02/06 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
2013/12/24 Javascript
深入分析Cookie的安全性问题
2015/03/01 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
jquery插件uploadify实现带进度条的文件批量上传
2015/12/13 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
2016/06/24 Javascript
Bootstrap中表单控件状态(验证状态)
2016/08/04 Javascript
基于angular实现三级联动的生日插件
2017/05/12 Javascript
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
2019/06/11 Javascript
JS事件流与事件处理程序实例分析
2019/08/16 Javascript
Vue实现商品飞入购物车效果(电商项目)
2019/11/26 Javascript
javascript贪吃蛇游戏设计与实现
2020/09/17 Javascript
[08:53]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS 选手采访
2021/03/11 DOTA
pygame游戏之旅 添加碰撞效果的方法
2018/11/20 Python
Python 实现数据结构-堆栈和队列的操作方法
2019/07/17 Python
python 实现读取csv数据,分类求和 再写进 csv
2020/05/18 Python
python爬虫---requests库的用法详解
2020/09/28 Python
Lombok插件安装(IDEA)及配置jar包使用详解
2020/11/04 Python
python 用pandas实现数据透视表功能
2020/12/21 Python
深入剖析webstorage[html5的本地数据处理]
2016/07/11 HTML / CSS
西班牙拥有最佳品牌的动物商店:Animalear.com
2018/01/05 全球购物
ProForm英国站点:健身房和健身器材网上商店
2019/06/05 全球购物
电钳专业个人求职信
2014/01/04 职场文书
我的梦中国梦演讲稿
2014/04/23 职场文书
客运企业隐患排查工作方案
2014/06/06 职场文书
幼儿园大班开学寄语
2014/08/02 职场文书
2014年班组建设工作总结
2014/12/01 职场文书
思想政治表现评语
2015/01/04 职场文书
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android