Vue input导入Excel

最新推荐文章于 2024-04-26 17:02:26 发布

原创最新推荐文章于 2024-04-26 17:02:26 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue 同时被 2 个专栏收录

20 篇文章

订阅专栏

13 篇文章

订阅专栏

1.template


              <el-button type="primary" @click="importExcel()" size="small"
                >批量导入</el-button
              >
              <input
                ref="file"
                type="file"
                accept=".xlsx,.xls"
                style="display: none"
                @change="uploadFile"
              />

2.script

  
    // 点击批量导入
    importExcel() {
      this.$refs.file.dispatchEvent(new MouseEvent("click"));
    },

  // 批量导入
    async uploadFile(e) {
      // const file = this.$refs.file.files
      const file = e.target.files;
      console.log(file[0]);
      var extName = file[0].name
        .substring(file[0].name.lastIndexOf("."))
        .toLowerCase();
      if (extName === ".xlsx" || extName === ".xls") {
        var formData = new FormData();
        formData.append("multipartFile", file[0]);
        console.log(formData);
        // 调导入接口
        excelList(formData)
          .then((res) => {
            console.log(res);
            if (res) {
              this.$message.success("数据导入成功");
              this.$refs.query.getTableList();
            } else {
              this.$message.error("数据导入失败");
            }
            e.target.value = "";
          })
          .catch((err) => {
            e.target.value = "";
          });
      } else {
        this.$message.error("数据导入失败，请选择正确的xlsx模板文件");
      }
    },