el-upload 多类目上传封装、模板(文件流)下载

elementui

el-upload  多类目上传封装、模板(文件流)下载

<el-form ref="form" :model="form" label-width="100px">
      <el-row>
        <el-card>
          <div
            v-for="(item, index) in list"
            :key="index"
            style="overflow: hidden"
          >
            <div class="form-title-16">{{ item.title }}</div>
            <el-col
              v-for="(it, idx) in item.children"
              :key="idx"
              :span="item.children.length == 1 ? 24 : 12"
            >
              <el-form-item :label="it.title">
                <el-button
                  size="mini"
                  type="primary"
                  @click="handleDowload(it.title, it.code)"
                  >下载模板</el-button
                >
                <el-upload
                  action=""
                  :http-request="
                    (file) => handleUpload(file, it.code, index, idx)
                  "
                  class="upload-img"
                  :show-file-list="false"
                  accept=".docx, .doc, .xlsx, .xls"
                  :on-remove="
                    (file, fileList) => handleRemove(file, fileList, it.code)
                  "
                >
                  <el-button
                    size="mini"
                    type="primary"
                    plain
                    >点击导入</el-button
                  >
                </el-upload>
              </el-form-item>
            </el-col>
          </div>
        </el-card>
      </el-row>
    </el-form>

list: [
        {
          title: "类目一",
          children: [
            {
              title: "类目一（1）",
              code: "NUM01"
            },
          ],
        },
        {
          title: "类目二",
          children: [
            {
              title: "类目二（1）",
              code: "NUM02"
            },
            {
              title: "类目二（2）",
              code: "NUM03"
            },
            {
              title: "类目二（3）",
              code: "NUM04"
            },
            {
              title: "类目二（4）",
              code: "NUM05"
            },
          ],
        },
        {
          title: "类目三",
          children: [
            {
              title: "类目三（1）",
              code: "NUM06"
            },
            {
              title: "类目三（2）",
              code: "NUM07"
            },
            {
              title: "类目三（3）",
              code: "NUM08"
            },
            {
              title: "类目三（4）",
              code: "NUM09"
            },
            {
              title: "类目三（5）",
              code: "NUM10"
            },
            {
              title: "类目三（6）",
              code: "NUM11"
            },
          ],
        },
      ],

    // 导入
    handleUpload(file, code, index, idx) {
      const formData = new FormData();
      formData.append("file", file.file);
      // 上传loading  this.list[index].children[idx][`loading${code}`] = true;
      apiXXXX(formData).then((res) => {
        if (res.code === 200) {
          this.$message.success("导入成功");
        }
        // 上传loading  this.list[index].children[idx][`loading${code}`] = false;
      });
    }



    // 移除
    handleRemove(file, fileList, code) {
      this.form[`${code}`] = [];
    }



    // 下载模板
    // 自定义文件名
    handleDowload(filename, code) {
      apiXXXX({ code: code }).then((res) => {
        if ("download" in document.createElement("a")) {
          let url = window.URL.createObjectURL(res);
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = url;
          link.setAttribute("download", filename + ".xls");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        } else {
          navigator.msSaveBlob(res, filename + ".xls");
        }
      });
    },