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中利用three.js实现全景图的完整示例
Dec 07 Vue.js
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
Vue实现小购物车功能
Dec 21 Vue.js
vue中activated的用法
Jan 03 Vue.js
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
Vite和Vue CLI的优劣
Jan 30 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
详解Vue slot插槽
Nov 20 Vue.js
vue项目配置sass及引入外部scss文件
Apr 14 Vue.js
vue封装数字翻牌器
Apr 20 Vue.js
Vue OpenLayer 为地图绘制风场效果
Apr 24 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 clearstatcache()函数详解
2010/03/02 PHP
PHP中extract()函数的妙用分析
2012/07/11 PHP
PHP中实现crontab代码分享
2015/03/26 PHP
thinkPHP5框架实现多数据库连接,跨数据连接查询操作示例
2019/05/29 PHP
php文件包含的几种方式总结
2019/09/19 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
DIV+CSS+JS不间断横向滚动实现代码
2013/03/19 Javascript
html向js方法传递参数具体实现
2013/08/08 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
2013/12/23 Javascript
js实现支持手机滑动切换的轮播图片效果实例
2015/04/29 Javascript
js实现横向伸展开的二级导航菜单代码
2015/08/28 Javascript
实例讲解JavaScript中instanceof运算符的用法
2016/06/08 Javascript
基于DOM节点删除之empty和remove的区别(详解)
2017/09/11 Javascript
js实现简单选项卡功能
2020/03/23 Javascript
微信小程序背景音乐开发详解
2019/12/12 Javascript
bootstrap实现嵌套模态框的实例代码
2020/01/10 Javascript
Openlayers实现图形绘制
2020/09/28 Javascript
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
python递归删除指定目录及其所有内容的方法
2017/01/13 Python
python笔记:mysql、redis操作方法
2017/06/28 Python
pytorch如何冻结某层参数的实现
2020/01/10 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
Pytest如何使用skip跳过执行测试
2020/08/13 Python
Wiggle中国:英国骑行、跑步、游泳 & 铁三运动装备专卖网店
2016/08/02 全球购物
2014年会策划方案
2014/05/11 职场文书
英语教研活动总结
2014/07/02 职场文书
七夕相亲活动策划方案
2014/08/31 职场文书
农林经济管理专业自荐信
2014/09/01 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书
电影小兵张嘎观后感
2015/06/03 职场文书
道士塔读书笔记
2015/06/30 职场文书
2019奶茶店创业计划书范本!
2019/07/15 职场文书
餐饮行业关注的9大营销策略
2019/08/26 职场文书
vue使用Google Recaptcha验证的实现示例
2021/08/23 Vue.js
Python FuzzyWuzzy实现模糊匹配
2022/04/28 Python