Element-el-upload

 

• 定义导入数据按钮

• <div>
      <el-button class="exportBtn" icon="el-icon-folder-add" @click="importWhiteList">导入数据</el-button>
  </div>

• 定义弹窗默认显示

• data{
      return {
            importWhiteListDia: false, // 白名单导入
       }
  }

• 点击事件显示弹窗

•  importWhiteList() {
        this.importWhiteListDia = true;
  }

• 定义弹窗

• <el-dialog title="白名单数据导入" :visible.sync="importWhiteListDia" width="40%">
      <div>
      
        <!-- 文件导入 -->
        <div class="first">
          <div class="uploadBorder">
            <el-upload class="upload_area" ref="whiteListXls" accept=".xlsx,.xls" action="" :http-request="uploadWhiteList"
              drag :auto-upload="false" :limit="1">
              <i class="el-icon-plus"></i>
              <div class="el-upload__text">
                <em>选择文件</em>
              </div>
            </el-upload>
          </div>
          
          <!-- 按钮 -->
          <div class="middle">
            <el-button type="primary" @click="determineWhiteList">确定</el-button>
            <el-button type="primary" @click="cancel">取消</el-button>
          </div>
        </div>
      </div>
  </el-dialog>

• 上传接口调用

• uploadWhiteList(param) {
        const loading = this.$loading({
          lock: true,
          text: '文件导入中',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.8)'
        });
        const formdata = new FormData(); // 创建一个 FormData 对象，这是一种用于构建包含键值对的表单数据的 JavaScript 对象
        formdata.append("importFile", param.file); //文件流
        formdata.append("userId", userInfo().getObject("user_id"));
        formdata.append("token", userInfo().getObject("token"));
        axios({
          method: "post",
          url: "接口路径",
          headers: {
            "Content-Type": "multipart/form-data;charset=UTF-8",
          },
          data: formdata,
        }).then((res) => {
          if (res.data.code == 500 && res.data.status == "Y") {
            this.$message(res.data.msg);
          }
          if (res.data.status == "Y") {
            this.$message(res.data.msg); // 提示导入情况信息 “任务完成，成功导入一条”
            loading.close(); // 结束加载动画
            this.importWhiteListDia = false; // 隐藏弹窗
            this.getWhiteList(this.ProvinceName, this.CountyName); // 重新获取数据列表
          }
        }).catch((err) => {
          console.log(err)
        });
    },

• 确定提交

• determineCreditList() {
    // 调用creditListXls组件的submit方法，触发上传文件操作
    this.$refs.creditListXls.submit()
    // 清空creditListXls组件的uploadFiles数组，即清空已上传的文件列表
    this.$refs.creditListXls.$data.uploadFiles = [];
  }