在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 相关文章推荐
获取网站跟路径的javascript代码(站点及虚拟目录)
Oct 20 Javascript
JavaScript 对象链式操作测试代码
Apr 25 Javascript
jqGrid jQuery 表格插件测试代码
Aug 23 Javascript
jQuery模拟新浪微博首页滚动效果的方法
Mar 11 Javascript
简介AngularJS的HTML DOM支持情况
Jun 17 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
Oct 08 Javascript
AngularJS递归指令实现Tree View效果示例
Nov 07 Javascript
AngularJS实现路由实例
Feb 12 Javascript
VueJs 将接口用webpack代理到本地的方法
Nov 27 Javascript
世界上最短的数字判断js代码
Sep 09 Javascript
antd日期选择器禁止选择当天之前的时间操作
Oct 29 Javascript
原生Js 实现的简单无缝滚动轮播图的示例代码
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
PHP之COOKIE支持详解
2010/09/20 PHP
PHP获取MAC地址的函数代码
2011/09/11 PHP
什么情况下可以不写PHP的闭合标签“?&gt;”
2014/08/28 PHP
PHP实现根据图片色界在不同位置加水印的方法
2015/08/08 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
XP折叠菜单&amp;仿QQ2006菜单
2006/12/16 Javascript
关于可运行代码无法正常执行的使用说明
2010/05/13 Javascript
jQuery与ExtJS之选择实例分析
2010/08/19 Javascript
JS的Document属性和方法小结
2013/09/17 Javascript
小议JavaScript中Generator和Iterator的使用
2015/07/29 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
js窗口关闭提示信息(兼容IE和firefox)
2015/10/23 Javascript
js date 格式化
2017/02/15 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
使用vue-router与v-if实现tab切换遇到的问题及解决方法
2018/09/07 Javascript
vuex 动态注册方法 registerModule的实现
2019/07/03 Javascript
es6数组之扩展运算符操作实例分析
2020/04/25 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
Vue两种组件类型:递归组件和动态组件的用法
2020/08/06 Javascript
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python判断值是否在list或set中的性能对比分析
2016/04/16 Python
Python实现树的先序、中序、后序排序算法示例
2017/06/23 Python
matplotlib 纵坐标轴显示数据值的实例
2018/05/25 Python
python 实现将txt文件多行合并为一行并将中间的空格去掉方法
2018/12/20 Python
Python3.5局部变量与全局变量作用域实例分析
2019/04/30 Python
Python基础进阶之海量表情包多线程爬虫功能的实现
2020/12/17 Python
党员政治学习材料
2014/05/14 职场文书
员工廉洁自律承诺书
2014/05/26 职场文书
学校交通安全责任书
2014/08/25 职场文书
2014年幼师工作总结
2014/11/22 职场文书
2014年乡镇工会工作总结
2014/12/02 职场文书
优秀教师单行材料
2014/12/16 职场文书
《梅花魂》教学反思
2016/02/18 职场文书
MySQL update set 和 and的区别
2021/05/08 MySQL
Java图书管理系统,课程设计必用(源码+文档)
2021/06/30 Java/Android
《乙女游戏世界对路人角色很不友好》OP主题曲无字幕动画MV公开
2022/04/05 日漫