在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设置div一直在页面顶部显示的方法
Oct 24 Javascript
JavaScript中跨域调用Flash的方法
Aug 11 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
Aug 22 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
Jul 07 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
Oct 11 Javascript
js拖拽功能实现代码解析
Nov 28 Javascript
浅谈Angular.js中使用$watch监听模型变化
Jan 10 Javascript
JS实现图片居中悬浮效果
Dec 25 Javascript
vue配置多页面的实现方法
May 22 Javascript
vue-cli中vue本地实现跨域调试接口
Jan 16 Javascript
使用flow来规范javascript的变量类型
Sep 12 Javascript
如何开发一个渐进式Web应用程序PWA
May 10 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
ThinkPHP提交表单时默认自动转义的解决方法
2014/11/25 PHP
前端必学之PHP语法基础
2016/01/01 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
2010/09/12 Javascript
关于js类的定义
2011/06/28 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
浅析jQuery1.8的几个小变化
2013/12/10 Javascript
通过复制Table生成word和excel的javascript代码
2014/01/20 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
实践中学习AngularJS表单
2016/03/21 Javascript
使用 stylelint检查CSS_StyleLint
2016/04/28 Javascript
javascript基于原型链的继承及call和apply函数用法分析
2016/12/15 Javascript
基于cookie实现zTree树刷新后展开状态不变
2017/02/28 Javascript
vue实现todolist单页面应用
2017/04/11 Javascript
VUE 使用中踩过的坑
2018/02/08 Javascript
select获取下拉框的值 下拉框默认选中方法
2018/02/28 Javascript
vue使用ajax获取后台数据进行显示的示例
2018/08/09 Javascript
Element Tooltip 文字提示的使用示例
2020/07/26 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
JavaScript Dom实现轮播图原理和实例
2021/02/19 Javascript
python 中split 和 strip的实例详解
2017/07/12 Python
python 随机数使用方法,推导以及字符串,双色球小程序实例
2017/09/12 Python
Python语言描述KNN算法与Kd树
2017/12/13 Python
用python实现的线程池实例代码
2018/01/06 Python
Pandas GroupBy对象 索引与迭代方法
2018/11/16 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
对python中UDP,socket的使用详解
2019/08/22 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
用python3读取python2的pickle数据方式
2019/12/25 Python
Python对称的二叉树多种思路实现方法
2020/02/28 Python
Django中FilePathField字段的用法
2020/05/21 Python
荷兰皇家航空公司中国官网:KLM中国
2017/12/13 全球购物
STAUD官方网站:洛杉矶独有的闲适风格
2019/04/11 全球购物
煤矿开采专业求职信
2014/07/08 职场文书
做人民满意的公务员活动方案
2014/08/25 职场文书
辞职信格式模板
2015/02/27 职场文书