vue、elementUI的excel文件导入导入

<el-dialog title="导入" :visible.sync="upload.open" width="400px" append-to-body :close-on-click-modal="false">
      <el-upload
          ref="upload"
          :limit="1"
          accept=".xlsx, .xls"
          :headers="upload.headers"
          :action="upload.url"
          :disabled="upload.isUploading"
          :on-progress="handleFileUploadProgress"
          :on-success="handleFileSuccess"
          :auto-upload="false"
          :file-list="excelList"
          :on-remove="onRemoveDr"
          :on-change="onChangeDr"
          drag
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处,或
            <em>点击上传</em>
          </div>
          <div class="el-upload__tip" style="color:red" slot="tip">提示:仅允许导入“xls”或“xlsx”格式文件!</div>
        </el-upload>
        <el-button size="mini" type="success" @click="downloadImportTemplate">下载模板</el-button>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitFileForm">导 入</el-button>
          <el-button @click="cancelFileForm">取 消</el-button>
        </div>
    </el-dialog>

import { Loading } from "element-ui";
///
//导入
      upload: {
          // 是否显示弹出层(用户导入)
          open: false,
          // 弹出层标题(用户导入)
          title: "",
          // 是否禁用上传
          isUploading: false,
          // 是否更新已经存在的用户数据
          // updateSupport: 0,
          // 设置上传的请求头部
          // 上传的地址
          url: ""
        },
      //上传的文件
      excelList:[],


//
//导入按钮
    handleImport(){
      this.upload.open = true;  
    },
    //导入提交
    submitFileForm(){
      if (this.excelList.length === 0) {
        this.$message.warning("请选择文件");
        return;
      }
      if (this.excelList.length > 1) {
        this.$message.warning("每次只能提交一个文件");
        return;
      }
      let formData = new FormData();
      this.excelList.forEach((item) => {
        formData.append("file", item.raw);
        console.log(item.raw);
      });
      console.log(formData.get("file"));
      let loadingInstance = Loading.service({
        lock: true, //lock的修改符--默认是false
        text: "导入中", //显示在加载图标下方的加载文案
        spinner: "el-icon-loading", //自定义加载图标类名
        background: "rgba(0, 0, 0, 0.7)", //遮罩层颜色
        target: document.querySelector("#futureTransferDialog"), //loadin覆盖的dom元素节点
      });
      uploadFile(formData)
        .then((res) => {
          loadingInstance.close();
          console.log(res);
          this.$message({
            type: "success",
            message: "导入成功!",
          });
          this.getList();
        })
        .then(() => {
          console.log("关闭  上传");
          this.excelList = [];
          this.upload.open = false;
        })
        .finally(() => {
          loadingInstance.close();
        });
    },
    //下载导入模板
      downloadImportTemplate(){
       window.location.href = "https://xxxxxxxxxxxx"
      },
    // 文件上传成功处理
      handleFileSuccess(response, file, fileList) {
        this.excelList = fileList;
      },
    // 文件上传中处理
      handleFileUploadProgress(event, file, fileList) {
        this.upload.isUploading = true;
      },
      onChangeDr(file, fileList) {
      this.excelList = fileList;
    },
    onRemoveDr(file, fileList) {
      this.excelList = fileList;
    },
    cancelFileForm(){
      this.upload.open = false
      this.excelList = [];
    },


  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值