在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可否多线程? 深入理解JavaScript定时机制
May 23 Javascript
js获取控件位置以及不同浏览器中的差别介绍
Aug 08 Javascript
javascript获取选中的文本的方法代码
Oct 30 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
Aug 27 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
Jan 17 Javascript
深入理解jquery中的事件与动画
May 24 Javascript
Bootstrap3.0学习教程之JS折叠插件
May 27 Javascript
JavaScript实现弹出广告功能
Mar 30 Javascript
Vue2.0表单校验组件vee-validate的使用详解
May 02 Javascript
深入浅析Vue.js中 computed和methods不同机制
Mar 22 Javascript
vue给组件传递不同的值方法
Sep 29 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
Nov 13 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 strtotime函数详解
2009/12/18 PHP
基于PHP导出Excel的小经验 完美解决乱码问题
2013/06/10 PHP
PHP中的reflection反射机制测试例子
2014/08/05 PHP
PHP用正则匹配form表单中所有元素的类型和属性值实例代码
2017/02/28 PHP
JavaScript Event事件学习第一章 Event介绍
2010/02/07 Javascript
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
2015/12/31 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
2016/01/25 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
2016/10/05 Javascript
easyui tree带checkbox实现单选的简单实例
2016/11/07 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
Vue仿今日头条实例详解
2018/02/06 Javascript
在Vue中使用Compass的方法
2018/03/02 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
2018/05/07 Javascript
ng-zorro-antd 入门初体验
2018/12/03 Javascript
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
分析经典Python开发工程师面试题
2019/04/08 Python
python正则爬取某段子网站前20页段子(request库)过程解析
2019/08/10 Python
python 通过邮件控制实现远程控制电脑操作
2020/03/16 Python
windows10 pycharm下安装pyltp库和加载模型实现语义角色标注的示例代码
2020/05/07 Python
Jupyter notebook如何实现指定浏览器打开
2020/05/13 Python
Python Socket TCP双端聊天功能实现过程详解
2020/06/15 Python
Kmeans均值聚类算法原理以及Python如何实现
2020/09/26 Python
如何用Java判断一个文件或目录是否存在
2012/11/19 面试题
银行简历自我评价
2014/02/11 职场文书
教师党员公开承诺书
2014/03/25 职场文书
优秀驾驶员先进事迹材料
2014/05/04 职场文书
投资建议书模板
2014/05/12 职场文书
查摆问题对照检查材料
2014/08/28 职场文书
甜品店创业计划书
2014/09/21 职场文书
放假通知格式
2015/04/14 职场文书
Matlab求解数组中的最大值及它所在的具体位置
2021/04/16 Python
Go 自定义package包设置与导入操作
2021/05/06 Golang
Python IO文件管理的具体使用
2022/03/20 Python