vue el-upload上传文件的示例代码


Posted in Vue.js onDecember 21, 2020

话不多说 直接上代码

<el-upload
       :action="actionUrl"
       class="avatar-uploader"
       :multiple="false"
       name="files"
       ref="upload"
       :file-list="fileList"
       :on-preview="handlePreview"
       :on-success="handleSuccess"
       :before-upload ="beforeUpload"
       :http-request="httpRequest"
       :on-exceed="handleExceed"
       :on-change="handleChanged"
       accept=".csv,.xls,.xlsx"
       :auto-upload="false"
      >
<el-button slot="trigger" size="small">选取文件</el-button>

<el-button style="margin-left: 10px;" size="small" type="primary" @click="submitUpload">上传到服务器</el-button>

<div slot="tip" class="el-upload__tip">只能上传csv/xslx/xsl文件,且不超过1M</div>
</el-upload>
actionUrl: `${env.imgCaptchaUrl}**/upload`,
fileList: [],

handleChanged(file,fileList){
   this.fileList = fileList
  },
  handleExceed (file, fileList) {
   console.log(file);
  },
  handleSuccess (res, file) {
   console.log(file);
   console.log(res);
  },
  handlePreview(file){
   console.log(file);
  },
  beforeUpload (file) {
   if (file.size / 1024 / 1024 > 1) {
    Vue.$vux.toast.text('上传文件不超过1M')
    return false
   }
   var ext = file.name.substring(file.name.lastIndexOf('.') + 1)
   const extension =
    ext === 'csv' ||
    ext === 'CSV' ||
    ext === 'xlsx' ||
    ext === 'xls'
   if (!extension) {
    Vue.$vux.toast.text('上传文件格式只能为csv、xlsx/xls')
    return false
   }
  },
  httpRequest (opt) {
   const _this = this
   const file = opt.file
   Vue.$vux.toast.text('文件上传中...')
   var reader = new FileReader()
   reader.readAsDataURL(file)
   reader.onload = function (e) {
    let imgType = ''
    var ext = file.name.substring(file.name.lastIndexOf('.') + 1)
    if (ext === 'csv' ) {
     imgType = 'csv'
    }
    if (ext === 'xlsx' || ext === 'xls') {
     imgType = 'xlsx'
    }
    uploadCsv({
     files: this.result.replace(`data:image/${imgType};base64,`, '')
    })
     .then(res => {
      if (res.errno === 0) {
       Vue.$vux.toast.text('上传成功')
       _this.account.license_url = res.data.url
      }
     })
     .catch(err => {})
   }
  },
  submitUpload(){
   if(this.fileList.length==0){
    this.successDialog = "请先选择文件";
    this.sussAlog = true;
    return
   }
   this.$refs.upload.submit();
  },

onDownload(){
   let start = ""
   let end = ""
   if(this.form.time){
    start = parseTime(this.form.time[0]);
    end = parseTime(this.form.time[1]);
   }
   delete(this.form.time)
   Object.assign(this.form, { 
    first_time: start, 
    end_time: end ,
   });
   let { 
      first_time,
      end_time,
     } = this.form;
   window.open(this.downUrl+"lm/downloadModel?"+
   "&first_time="+first_time+
   "&end_time="+end_time
   , '_blank');
  },

以上就是vue el-upload上传文件的示例代码的详细内容,更多关于vue el-upload上传文件的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
Vue中computed和watch有哪些区别
Dec 19 Vue.js
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
vue中使用echarts的示例
Jan 03 Vue.js
如何在VUE中使用vue-awesome-swiper
Jan 04 Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
vue实现拖拽交换位置
Apr 07 Vue.js
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 Vue.js
vue @ ~ 相对路径 路径别名设置方式
Jun 05 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 #Vue.js
vue中如何添加百度统计代码
Dec 19 #Vue.js
vue 导航守卫和axios拦截器有哪些区别
Dec 19 #Vue.js
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 #Vue.js
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 #Vue.js
Vue——前端生成二维码的示例
Dec 19 #Vue.js
如何在vue中使用kindeditor富文本编辑器
Dec 19 #Vue.js
You might like
支持oicq头像的留言簿(二)
2006/10/09 PHP
php htmlentities和htmlspecialchars 的区别
2008/08/18 PHP
使用PHP提取视频网站页面中的FLASH地址的代码
2010/04/17 PHP
php中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
destoon设置自定义搜索的方法
2014/06/21 PHP
AJAX PHP无刷新form表单提交的简单实现(推荐)
2016/09/09 PHP
IE7提供XMLHttpRequest对象为兼容
2007/03/08 Javascript
JavaScript 特殊字符
2007/04/05 Javascript
javascript showModalDialog 内跳转页面的问题
2010/11/25 Javascript
基于jQuery的左右滚动实现代码
2010/12/03 Javascript
JavaScript中两种链式调用实现代码
2011/01/12 Javascript
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
Raphael带文本标签可拖动的图形实现代码
2013/02/20 Javascript
轻松实现javascript数据双向绑定
2015/11/11 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
2016/05/20 Javascript
如何理解jQuery中的ajaxSubmit方法
2017/03/13 Javascript
Vue2.0实现组件数据的双向绑定问题
2018/03/06 Javascript
JavaScript调用模式与this关键字绑定的关系
2018/04/21 Javascript
Layui事件监听的实现(表单和数据表格)
2019/10/17 Javascript
JavaScript事件循环及宏任务微任务原理解析
2020/09/02 Javascript
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
使用django-suit为django 1.7 admin后台添加模板
2014/11/18 Python
python通过线程实现定时器timer的方法
2015/03/16 Python
Python实现的归并排序算法示例
2017/11/21 Python
解决Django migrate No changes detected 不能创建表的问题
2018/05/27 Python
python解析xml简单示例
2019/06/21 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
python爬虫开发之selenium模块详细使用方法与实例全解
2020/03/09 Python
python从Oracle读取数据生成图表
2020/10/14 Python
信用社员工先进事迹材料
2014/02/04 职场文书
经济信息系毕业生自荐信
2014/06/02 职场文书
食堂标语大全
2014/06/11 职场文书
党员批评与自我批评
2014/10/15 职场文书
2015年音乐教学工作总结
2015/07/22 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP
Python中的套接字编程是什么?
2021/06/21 Python