文件的手动上传

---

一、vue文件的手动上传

1.html结构

代码如下（示例）：

 <!-- 批量导出弹窗 -->
    <el-dialog
      class="inputBatch"
      title="批量导入"
      :visible.sync="showInputMany"
      width="35%"
      :before-close="handleDialogClose"
      :lockScroll="false"
    >
      <div class="outsiderWrap">
        <el-upload
          class="upload-demo"
          ref="upload"
          :on-change="onChange"
          action="#"
          :limit="1"
          :file-list="fileList"
          :on-remove="handleRemove"
          :auto-upload="false"
        >
          <el-button
            v-if="!canUpload"
            :disabled="!canUpload"
            type="primary"
            plain
            class="btn"
            slot="tip"
          >
            <img
              class="button_icon"
              src="@/assets/common/icon_Line_Upload.svg"
              alt=""
            />
            上传文件
          </el-button>
          <el-button
            v-if="canUpload"
            type="primary"
            plain
            class="btn"
            slot="trigger"
          >
            <img
              class="button_icon"
              src="@/assets/common/icon_Line_Upload.svg"
              alt=""
            />
            上传文件
          </el-button>
        </el-upload>
      </div>
      <a class="inputModel" href="javascript:;" @click="getModel"
        ><img
          src="@/assets/common/icon_template_download.svg"
          alt=""
        />获取导入模板</a
      >
      <span slot="footer" class="dialog-footer">
        <el-button @click="canCelInput">取 消</el-button>
        <el-button type="primary" @click="confirmSubmit">确 定</el-button>
      </span>
    </el-dialog>

2.js代码

代码如下（示例）：

export default {
data(){
return {
	fileList:[],
	canUpload: true,
   }
},
methods:{
onChange(file, fileList) {
      let Name = file.name;
      let fileName = Name.toLowerCase().substr(Name.lastIndexOf("."));
      console.log("file.size", file);
      const isLt2M = file.size > 31457280;
      if (fileName != ".xls" && fileName != ".xlsx") {
        this.fileList = [];
        return this.$message.error("仅支持扩展名 .xls .xlsx ！");
      }
      if (isLt2M) {
        this.fileList = [];
        return this.$message.error("上传文件大小不得超过30M！");
      }
      this.fileList = fileList;
    },
    handleRemove() {
      this.fileList = [];
    },
    confirmSubmit() {
      if (this.fileList.length === 0)
        return this.$message.error("请上传文件！");
      this.uploadSectionFile();
    },
     async uploadSectionFile() {
      const loading = this.$loading({
        lock: true,
        text: "上传中...",
        spinner: "el-icon-loading",
        background: "rgba(7, 17, 27, 0.3)",
        customClass: "myLoading",
      });
      const FormDataFile = new FormData();
      const file = this.fileList[0].raw;
      FormDataFile.append("file", file);
      const res = await importBatch(FormDataFile);
      clearTimeout(this.timer);
      this.timer = null;
      this.timer = setTimeout(() => {
        if (res.code == 200) {
          loading.close();
          this.$message.success("导入成功");
          this.canCelInput();
          this.queryInfo.pageNum = 1;
          this.getDataList();
        } else if (res.code == 70050) {
          loading.close();
          this.$confirm(res.msg, "数据重复", {
            // confirmButtonText: "确定",
            // cancelButtonText: "取消",
            type: "warning",
            lockScroll: true,
            customClass: "myClass",
            center: true,
          })
            .then()
            .catch((err) => {
              // console.log(err);
            });
        } else {
          loading.close();
          this.$message.error(res.msg);
        }
      }, 500);
    },
}
}