大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

怎么在vue项目中利用el-upload实现一个文件上传功能-创新互联

这篇文章将为大家详细讲解有关怎么在vue项目中利用el-upload实现一个文件上传功能,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

创新互联建站专业为企业提供霍山网站建设、霍山做网站、霍山网站设计、霍山网站制作等企业网站建设、网页设计与制作、霍山企业网站模板建站服务,十载霍山做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

  选取文件
  上传到服务器
  只能上传csv/xslx/xsl文件,且不超过1M
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实现一个文件上传功能-创新互联
标题URL:http://dzwzjz.com/article/deospp.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP