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 +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
Vue实现点击当前行变色
Dec 14 Vue.js
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 Vue.js
vue如何清除浏览器历史栈
May 25 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/07/07 PHP
PHP常用的排序和查找算法
2015/08/06 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
JavaScript实现页面实时显示当前时间的简单实例
2013/07/20 Javascript
浅析JavaScript中的常用算法与函数
2013/11/21 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
Node.js安装教程和NPM包管理器使用详解
2014/08/16 Javascript
javascript实现鼠标移到Image上方时显示文字效果的方法
2015/08/07 Javascript
JavaScript实现同时调用多个函数的方法
2015/11/09 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
jQuery加密密码到cookie的实现代码
2017/04/18 jQuery
Vue项目中跨域问题解决方案
2018/06/05 Javascript
vuejs选中当前样式active的实例
2018/08/22 Javascript
解决layer.open后laydate失效的问题
2019/09/06 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
python sort、sorted高级排序技巧
2014/11/21 Python
Python中的random()方法的使用介绍
2015/05/15 Python
python分割列表(list)的方法示例
2017/05/07 Python
python查询mysql,返回json的实例
2018/03/26 Python
Python多重继承的方法解析执行顺序实例分析
2018/05/26 Python
python实现简单名片管理系统
2018/11/30 Python
python批量下载网站马拉松照片的完整步骤
2018/12/05 Python
Python中的延迟绑定原理详解
2019/10/11 Python
Python.append()与Python.expand()用法详解
2019/12/18 Python
Django CSRF认证的几种解决方案
2020/03/03 Python
pandas数据选取:df[] df.loc[] df.iloc[] df.ix[] df.at[] df.iat[]
2020/04/24 Python
Python中如何添加自定义模块
2020/06/09 Python
全球航班旅行搜索网站:Cheapflights
2017/05/19 全球购物
巴西手表购物网站:eclock
2019/03/19 全球购物
实习教师自我鉴定
2013/12/09 职场文书
财务负责人任命书
2014/06/06 职场文书
居委会个人对照检查材料思想汇报
2014/09/29 职场文书
班子查摆四风个人对照检查材料思想汇报
2014/10/04 职场文书
工作检讨书怎么写
2014/10/10 职场文书
工作简历自我评价
2015/03/11 职场文书
2015年幼师个人工作总结
2015/10/15 职场文书