Vue-自定义基础导入按钮组件

knitef

于 2022-05-13 14:48:05 发布

阅读量1k

点赞数 1

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/knitef/article/details/124751648

版权

这篇博客介绍了如何使用HTML和JavaScript实现一个自定义的文件上传功能，特别是针对Excel文件的导入。通过监听文件选择事件，进行文件类型的检查，确保上传的文件是.xlsx或.xls格式。然后利用FormData对象将文件数据准备就绪，最后调用导入接口进行上传。在上传过程中，可以添加额外的验证和处理步骤，例如检查文件大小。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

template如下

<input
        type="file"
        ref="import"
        style="display: none"
        @change="uploadIn($event)"
      />
      <el-button type="warning"  size="small" @click="handleIn"
        >导入</el-button
      >

script 如下实现自定义上传，其中可以加入判断文件大小等各种操作，主要我这里是通过formdata上传，也可以通过其他方式写入文档流，根据自己需求而定

// 打开导入
    handleIn() {
      this.$refs.import.click();
    },

    //导入
    uploadIn(event) {
      let file = event.target.files; //获得文件
      for (let i = 0; i < file.length; i++) {
        //    上传类型判断
        let fileName = file[i].name;
        let idx = fileName.lastIndexOf(".");
        if (idx != -1) {
          let ext = fileName.substr(idx + 1).toUpperCase();
          ext = ext.toLowerCase();
          console.log(ext == "xlsx");
          if (ext !== "xls" && ext !== "xlsx") {
            this.msgWarning("上传文件只能是excel文件");
            return;
          } else {
            this.importFile = file[i];
          }
        }
      }
      let formData = new FormData(); //数据
      formData.append("file", this.importFile);
      console.log(formData);
      importIn(formData)
        .then((res) => {
          if (res.status === 1) {
            this.msgSuccess("导入成功");
          } else if (res.status === 0) {
            this.msgError(res.msg);
          }
        })
        .catch((e) => {});
    },