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 相关文章推荐
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
vue实现轮播图帧率播放
Jan 26 Vue.js
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
vue实现可移动的悬浮按钮
Mar 04 Vue.js
关于vue中如何监听数组变化
Apr 28 Vue.js
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
Axios代理配置及封装响应拦截处理方式
Apr 07 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
PHP通用检测函数集合
2006/11/25 PHP
谈PHP生成静态页面分析 模板+缓存+写文件
2009/08/17 PHP
深入探究PHP的多进程编程方法
2015/08/18 PHP
Linux php 中文乱码的快速解决方法
2016/05/13 PHP
Yii中的relations数据关联查询及统计功能用法详解
2016/07/14 PHP
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
PHP使用mongoclient简单操作mongodb数据库示例
2019/02/08 PHP
js function定义函数的几种不错方法
2014/02/27 Javascript
使用jquery+CSS实现控制打印样式
2014/12/31 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
2016/09/05 Javascript
switch语句的妙用(必看篇)
2016/10/03 Javascript
Jqprint实现页面打印
2017/01/06 Javascript
vue权限管理系统的实现代码
2019/01/17 Javascript
通过vue手动封装on、emit、off的代码详解
2019/05/29 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
vue表单验证之禁止input输入框输入空格
2020/12/03 Vue.js
Vue看了就会的8个小技巧
2021/01/21 Vue.js
[03:21]辉夜杯主赛事 12月25日TOP5
2015/12/26 DOTA
[42:00]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第一场 12.13
2020/12/17 DOTA
Python的Flask框架中的Jinja2模板引擎学习教程
2016/06/30 Python
Python对字符串实现去重操作的方法示例
2017/08/11 Python
对pandas将dataframe中某列按照条件赋值的实例讲解
2018/11/29 Python
python 调用有道api接口的方法
2019/01/03 Python
Django框架模板介绍
2019/01/15 Python
python中logging模块的一些简单用法的使用
2019/02/22 Python
python Selenium 库的使用技巧
2020/10/16 Python
详解Python中list[::-1]的几种用法
2020/11/16 Python
CSS3 background-image颜色渐变的实现代码
2018/09/13 HTML / CSS
Belvilla德国:在线预订度假屋
2018/04/10 全球购物
德国足球商店:OUTFITTER
2019/05/06 全球购物
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
公司司机岗位职责
2014/02/07 职场文书
幼儿园母亲节活动方案
2014/03/10 职场文书
运动会口号大全
2014/06/07 职场文书
如何用python清洗文件中的数据
2021/06/18 Python
opencv检测动态物体的实现
2021/07/21 Python