element-ui 文件上传

Posted 2022-07-15 byme

<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)