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

 更新时间:2020年12月21日 09:56:32   作者:我自是年少  
这篇文章主要介绍了vue el-upload上传文件的示例代码,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下

话不多说 直接上代码

<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起步(无cli)的啊教程详解

    Vue起步(无cli)的啊教程详解

    本文通过实例代码给大家介绍了Vue起步(无cli)的相关知识,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2019-04-04
  • ant-design-vue按需加载的坑的解决

    ant-design-vue按需加载的坑的解决

    这篇文章主要介绍了ant-design-vue按需加载的坑的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • Vue3中结合ElementPlus实现弹窗的封装方式

    Vue3中结合ElementPlus实现弹窗的封装方式

    这篇文章主要介绍了Vue3中结合ElementPlus实现弹窗的封装方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • vue实现文章评论和回复列表

    vue实现文章评论和回复列表

    这篇文章主要为大家详细介绍了vue实现文章评论和回复列表,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Vue表单提交点击事件只允许点击一次的实例

    Vue表单提交点击事件只允许点击一次的实例

    这篇文章主要介绍了Vue表单提交点击事件只允许点击一次的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • Vue的diff算法原理你真的了解吗

    Vue的diff算法原理你真的了解吗

    这篇文章主要为大家详细介绍了Vue的diff算法原理,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03
  • Vue 框架之动态绑定 css 样式实例分析

    Vue 框架之动态绑定 css 样式实例分析

    这篇文章主要介绍了Vue 框架之动态绑定 css 样式的方法,本文通过分享小实例给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • 图文详解Element-UI中自定义修改el-table样式

    图文详解Element-UI中自定义修改el-table样式

    elementUI提供的组件间距、样式都比较大,如果直接套用,在页面显示可能就会显得很大,就比如表格,表头、行宽如果不修改的话,遇到列较多的时候,会显得整个页面就不好看,下面这篇文章主要给大家介绍了关于Element-UI中自定义修改el-table样式的相关资料,需要的朋友可以参考下
    2022-08-08
  • vue项目中自定义video视频控制条的实现代码

    vue项目中自定义video视频控制条的实现代码

    这篇文章主要介绍了vue项目中自定义video视频控制条的实现代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • vue项目打包后proxyTable代理失效问题及解决

    vue项目打包后proxyTable代理失效问题及解决

    这篇文章主要介绍了vue项目打包后proxyTable代理失效问题及解决方案,具有很好的参考价值,希望对大家有所帮助。
    2023-05-05

最新评论