導(dǎo)入

          <el-upload
            ref="upload"
            :limit="limitNum"
            :auto-upload="false"
            accept=".xlsx"
            :action="UploadUrl()"
            :before-upload="beforeUploadFile"
            :on-change="fileChange"
            :on-exceed="exceedFile"
            :on-success="handleSuccess"
            :on-error="handleError"
            :file-list="editAddForm.annexList"
            drag
          >
            <i class="el-icon-upload" />
            <div class="el-upload__text">
              將文件拖到此處，或
              <em>點(diǎn)擊上傳</em>
            </div>
            <div slot="tip" class="el-upload__tip">
              <el-link type="info" style="font-size:12px" @click="importTemplate">下載模板</el-link>
            </div>
            <div slot="tip" class="el-upload__tip" style="color:red">提示：僅允許導(dǎo)入“xls”或“xlsx”格式文件外潜！</div>
          </el-upload>

// 文件超出個(gè)數(shù)限制時(shí)的鉤子
    exceedFile(files, fileList) {
      this.$message.warning(`只能選擇 ${this.limitNum} 個(gè)文件达椰，當(dāng)前共選擇了 ${files.length + fileList.length} 個(gè)`)
    },
    // 文件狀態(tài)改變時(shí)的鉤子
    fileChange(file, fileList) {
      console.log(file, 'file')
      console.log(file.raw, 'raw')
      this.editAddForm.annexList.push(file)
    },
    // 上傳文件之前的鉤子, 參數(shù)為上傳的文件,若返回 false 或者返回 Promise 且被 reject，則停止上傳
    beforeUploadFile(file) {
      console.log('before upload')
      console.log(file)
      const extension = file.name.substring(file.name.lastIndexOf('.') + 1)
      const size = file.size / 1024 / 1024
      if (extension !== 'xlsx') {
        this.$message.warning('只能上傳后綴是.xlsx的文件')
      }
      if (size > 10) {
        this.$message.warning('文件大小不得超過10M')
      }
    },
    // 文件上傳成功時(shí)的鉤子
    handleSuccess1(res, file, fileList) {
      this.$message.success('文件上傳成功')
    },
    // 文件上傳失敗時(shí)的鉤子
    handleError(err, file, fileList) {
      this.$message.error('文件上傳失敗')
    },
    UploadUrl: function() {
      // 因?yàn)閍ction參數(shù)是必填項(xiàng)堤尾，我們使用二次確認(rèn)進(jìn)行文件上傳時(shí)，直接填上傳文件的url會(huì)因?yàn)闆]有參數(shù)導(dǎo)致api報(bào)404迁客，所以這里將action設(shè)置為一個(gè)返回為空的方法就行郭宝，避免拋錯(cuò)
      return ''
    },
    submitFileForm(params) {
      if (this.editAddForm.annexList.length === 0) {
        this.$message.warning('請上傳文件')
      } else {
        const form = new FormData()
        form.append('file', this.editAddForm.annexList[0].raw)
        importExcel(this.currentRoomId, form).then(res => {
          this.$message.success('導(dǎo)入成功')
          this.getPeople(this.currentRoomId)
          this.getList()
          this.upload.importVisible = false
        })
      }
    },

注意:文件要通過new formdata轉(zhuǎn)換
導(dǎo)出

a.href = `${process.env.VUE_APP_BASE_API}${res.data.templateUrl}`
      a.download = res.data.templateName
      a.click()