欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

element-ui 文件上传

程序员文章站 2022-03-20 16:52:33
<el-form-item>
          <el-upload
            ref="upload"
            class="upload-demo"
            :action="daoruurls"
            :on-preview="handlepreview"
            :on-remove="handleremove"
            :file-list="filearr"
            :on-success="handlesuccess"
            :before-upload="beforeuploadfile"
            :auto-upload="false"
            :data="daoru"
            :limit="1"
            :on-exceed="onexceed"
          >
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button
              style="margin-left: 10px;"
              size="small"
              type="success"
              @click="daorusubmitform('daoruform')"
            >导入</el-button>
            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> -->
          </el-upload>
        </el-form-item>
// 导入确认
    daorusubmitform(form) {
      console.log('111', this.filearr)
      // console.log("form", form, this.$refs[form]);
      this.$refs[form].validate(valid => {
        this.$refs.upload.submit()
      })
    },
    // 导入关闭
    daoruclosedialog() {
      this.daorudialogformvisible = false
    },
    // 导入之前
    beforeuploadfile(file) {
      console.log('上传之前', file)
      console.log('daoru', this.daoru)
      const islt10m = file.size / 1024 / 1024 < 10
      const istext = file.type === 'application/vnd.ms-excel'
      const istextcomputer =
        file.type ===
        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      if (!islt10m) {
        this.$message.error('上传文件大小不能超过10mb!')
        return false
      }
      if (!istext && !istextcomputer) {
        this.$message.error('上传文件类型必须为excel!')
        return false
      }
    },
    // 导入成功
    handlesuccess: function(res, file, filelist) {
      console.log('成功', res, file, filelist)
      const _this = this
      console.log(res)
      if (res.success === true) {
        _this.$alert('上传成功', '提示', {
          confirmbuttontext: '确定',
          callback: action => {
            this.currentpage = 1
            this._reportlist()
            this.daorudialogformvisible = false
          }
        })
      } else {
        _this.$alert('上传失败,请稍后再试', '提示', {
          confirmbuttontext: '确定',
          callback: action => {
            this.daorudialogformvisible = false
            this.filearr = []
          }
        })
      }
    },
    // 删除文件
    handleremove(file, filelist) {
      console.log('file删除', file, filelist)
    },
    // 选中文件
    handlepreview(file) {
      // this.filearr = file;
      console.log('file选中', file)
    },
    // 文件限制
    onexceed(files, filelist) {
      this.$message({
        message: '最多只能上传一个文件',
        type: 'error'
      })
      console.log('files, filelist', files, filelist)
    }