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实现下载文件流完整前后端代码
Nov 17 Vue.js
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
vue 通过base64实现图片下载功能
Dec 19 Vue.js
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
vue动态设置路由权限的主要思路
Jan 13 Vue.js
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
Vue全家桶入门基础教程
May 14 Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
vue使用watch监听属性变化
Apr 30 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
Destoon实现多表查询示例
2014/08/21 PHP
php中ftp_chdir与ftp_cdup函数用法
2014/11/18 PHP
php跨服务器访问方法小结
2015/05/12 PHP
JavaScript动态调整TextArea高度的代码
2010/12/28 Javascript
javascript 回到顶部效果的实现代码
2014/02/17 Javascript
详解nodejs与javascript中的aes加密
2016/05/22 NodeJs
用js实现放大镜的效果的简单实例
2016/05/23 Javascript
JS实现的多张图片轮流播放幻灯片效果
2016/07/22 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
2016/08/25 Javascript
ReactJs实现树形结构的数据显示的组件的示例
2017/08/18 Javascript
JavaScript实现的DOM绘制柱状图效果示例
2018/08/08 Javascript
pm2启动ssr失败的解决方法
2019/06/29 Javascript
vue请求数据的三种方式
2020/03/04 Javascript
vue使用video插件vue-video-player的示例
2020/10/03 Javascript
[58:37]Serenity vs Fnatic 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python中__init__和__new__的区别详解
2014/07/09 Python
Python实现windows下模拟按键和鼠标点击的方法
2015/03/13 Python
python二进制文件的转译详解
2019/07/03 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
python实现的发邮件功能示例
2019/09/11 Python
使用 Python 遍历目录树的方法
2020/02/29 Python
使用Keras中的ImageDataGenerator进行批次读图方式
2020/06/17 Python
什么是WEB控件?使用WEB控件有哪些优势?
2012/01/21 面试题
东方红海科技面试题软件测试方面
2012/02/08 面试题
国培计划培训感言
2014/03/11 职场文书
3的组成教学反思
2014/04/30 职场文书
市级三好学生事迹材料
2014/08/27 职场文书
反腐倡廉警示教育活动心得体会
2014/09/04 职场文书
医院反腐倡廉演讲稿
2014/09/16 职场文书
个人贷款收入证明
2014/10/26 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
如何写通讯稿
2015/07/22 职场文书
经典励志格言:每日一句,让你每天充满能量
2019/08/16 职场文书
创业计划书之家教中心
2019/09/25 职场文书
Python数据分析入门之数据读取与存储
2021/05/13 Python
实操Python爬取觅知网素材图片示例
2021/11/27 Python