如何简单快速的导入 excel.xlsx 文件

144 阅读1分钟

监听 change 事件,当上传文件后触发事件, 文件的类型为 file ,上传文件的格式为 .xlsx

格式可以添加多个,例如:.xlsx .xls

         <input
          ref="excel-upload-input"
          class="excel-upload-input"
          type="file"
          accept=".xlsx"
          @change="hChangeFile"
          >

在 methods 中开始处理

    // 选中文件框中的某个文件, change 事件
    async hChangeFile(e) {
      // 事件对象 e 会自动收集当前用户选中的文件,一定要加上索引才可以
      const file = e.target.files[0]
      console.log('e.target.files[0]', file)

      try {
        // 判断 有选中的文件,不为空 的情况下执行
        if (file) {
        // 准备上传的文件参数
          const fd = new FormData()
          fd.append('file', file)

          // 调用接口,上传文件
          await uploadExcel(fd)

          // 提醒用户
          this.$message.success('上传成功')

          // 关闭当前弹窗
          this.$emit('update:show-excel-dialog', false)

          // 刷新
          this.$emit('loadEpartment')
        }
      } finally {
      
        // 重置 input 的value 的值,下次选中同一个文件时也能触发 change
        this.$refs['excel-upload-input'].value = ''
      }
    }