element-ui 文件上传

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

    }