</el-form>
          <el-form-item>
            <form id="upload" enctype="multipart/form-data" method="post">
              <el-upload
                ref="upload"
                class="upload-demo"
                action="#"
                :http-request="UploadImage"
                :on-change="fileChange"
                :before-upload="beforeUpload"
              >
                <!--                :before-upload="beforeUpload"-->
                <el-button size="small" type="primary" class="el-icon-upload">&nbsp;&nbsp;數(shù)據(jù)上傳</el-button>
                <!--                <div-->
                <!--                  slot="tip"-->
                <!--                  class="el-upload__tip"-->
                <!--                >只能上傳db文件，且不超過一個(gè)</div>-->
              </el-upload>
            </form>
          </el-form-item>
          <!--          <el-progress v-if="progressFlag" />-->
          <el-form-item label="當(dāng)前文件上傳進(jìn)度">
            <el-progress style="width: 200px;margin-top: 8px" :text-inside="true" :stroke-width="20" :percentage="progressPercent" />
          </el-form-item>
        </el-form>

引入axios
import axios from 'axios'

UploadImage(param) {
      if (this.filterForm.documentType === '') {
        this.$message({
          message: '請(qǐng)選擇檔案類型后并重新上傳',
          type: 'warning'
        })
        return
      } else if (this.filterForm.regTargetArea === '') {
        this.$message({
          message: '請(qǐng)選擇區(qū)縣后并重新上傳',
          type: 'warning'
        })
        return
      } else {
        // 上傳新文件時(shí)，將進(jìn)度條值置為零
        this.progressPercent = 0
        this.progressFlag = true
        const formdata = new FormData()
        formdata.append('documentType', this.filterForm.documentType)
        formdata.append('upload', param.file)
        axios({
          url: 'url?token=' + this.$store.getters.token,
          method: 'post',
          data: formdata,
          headers: { 'Content-Type': 'multipart/form-data' },
          onUploadProgress: progressEvent => {
            // progressEvent.loaded:已上傳文件大小
            // progressEvent.total:被上傳文件的總大小
            this.progressPercent = (progressEvent.loaded / progressEvent.total * 100)
            console.info(progressEvent.loaded)
            console.info(progressEvent.total)
          }
        }).then(response => {
          if (response.data.rel) {
            this.$message({
              message: '文件上傳成功',
              type: 'success'
            })
            // if (this.progressPercent === 100) {
            //   this.progressFlag = false
            //   this.progressPercent = 0
            // }
            this.logData.upUploadStatus = 1 // 是否上傳成功 1 成功 0失敗
          } else {
            this.logData.upUploadStatus = 0
          }
          this.logData.upRegion = this.filterForm.regTargetArea // areacode
          this.logData.upFileUrl = response.data.filePath // 上傳文件存儲(chǔ)路徑
          this.logData.upQueryType = this.filterForm.documentType // 檔案類型id
          this.logData.upUploadFileSize = response.data.fileSize // 文件大小
          this.logData.upUploadFileName = response.data.fileName // 文件名
          // 文件上傳成功后添加日志
          addUpload(this.logData).then(item => {
            console.log('新增文件上傳統(tǒng)計(jì)日志成功')
          }).catch(res => {
            console.log('新增文件上傳統(tǒng)計(jì)日志失敗')
          })
          param.onSuccess() // 上傳成功的文件會(huì)顯示綠色的對(duì)勾
        }).catch(response => {
          this.$message({
            message: '文件上傳失敗',
            type: 'warning'
          })
        }).then(error => {
          console.log(error)
        })
      }
    }

    beforeUpload(file) {
      console.log(file)
      const testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
      const extension = testmsg === 'db'
      // const isLt2M = file.size / 1024 / 1024 < 10
      if (!extension) {
        this.$message({
          message: '上傳文件只能是db格式!',
          type: 'warning'
        })
      }
      // if(!isLt2M) {
      //     this.$message({
      //         message: '上傳文件大小不能超過 10MB!',
      //         type: 'warning'
      //     });
      // }
      // return extension || extension2 && isLt2M
      return extension
    }