element文件上传

<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="430px"
    :before-close="handleClose"
    append-to-body
    class="uploadFileDialog"
  >
    <div v-show="timeOnOff">
      <p style="text-align: center; padding-bottom: 20px">是否覆盖已上传数据？</p>
      <p align="right">
        <el-button @click="dialogAccess()" type="primary" size="medium" >是</el-button>
        <el-button @click="dialogClose()" size="medium">关闭</el-button>
      </p>
    </div>
    <div v-show="waiting&start">
      <p style="text-align: center; padding-bottom: 20px">请先下载名单模板，填好后上传</p>
      <div class="linkBtn" style="text-align: center;">
        <a :href="downloadTmplUrl" target="_blank" style="margin-right: 1.5em">
          <el-button size="medium">下载模板</el-button>
        </a>

          <el-upload
            ref="upload"
            class="upload-demo speBtn"
            action="/apis/prorank/upload-name-list"
            list-type="text"
            :multiple="false"
            :auto-upload="true"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-success="successUpload"
            :on-error="errorUpload"
            :before-upload="beforeAvatarUpload"
            :on-progress="progress"
            :data="{ id: params.id, merchant_num: merchant_num }"
            :show-file-list="false"
            :limit="1"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >  <el-button type="primary" size="medium">上传名单 </el-button></el-upload>

      </div>
    </div>

    <div v-show="showProgress">
      <el-progress :percentage="percent"></el-progress>
      <p>正在上传名单，请勿关闭页面</p>
      <p align="right">
        <el-button @click="cancelUpload()" type="danger" size="medium">取消上传</el-button>
      </p>
    </div>

    <div v-show="uploadError">
      <p class="errortip">{{error}}</p>
      <p align="right" style="margin-top: 10px">
        <el-button @click="reset()" type="primary" size="medium">重新选择</el-button>
      </p>
    </div>

    <div v-show="uploadSuccess">
      <p>上传完成</p>
      <p align="right">
        <el-button @click="reset()" type="primary" size="medium" v-show="false" >继续上传</el-button>
        <el-button @click="handleClose()" size="medium">关闭</el-button>
      </p>
    </div>
  </el-dialog>
</template>

<script>
import { Message, MessageBox } from "element-ui";
import './index.less'

export default {
  props: ["onOk", "onClose", "params"],
  data() {
    return {
      visible: true,
      timer: undefined,
      fileList: [],
      percent: 0,
      title: "上传文件",
      error: "",
      start:!this.params.update_name_list,
      timeOnOff:this.params.update_name_list,
      merchant_num: window.$rootScope.userInfo.merchant_num,
      downloadTmplUrl: '/apis/prorank/download-template?merchant_num=' +  window.$rootScope.userInfo.merchant_num,
    };
  },
  created() {
    this.visible = true;
  },
  computed: {
    waiting() {
      return this.title == "上传文件";
    },
    showProgress() {
      return this.title == "上传文件中";
    },
    uploadError() {
      return this.title == "上传失败";
    },
    uploadSuccess() {
      return this.title == "上传成功";
    }
  },
  methods: {
    handleExceed(files, fileList) {
      this.fileList = [];
      Message.warning(
        `当前限制选择 1 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },

    dialogClose(){
      this.visible = false;
    },

    dialogAccess(){
      this.start = true;
      this.timeOnOff = false;
    },

    progress(event, file, fileList) {
      this.percent = parseFloat(event.percent.toFixed(1));
    },

    beforeAvatarUpload(file) {
      const extension = file.name.substring(file.name.lastIndexOf(".") + 1);
      const supportExtension = ["xls", "xlsx"];
      const isLt5M = file.size / 1024 / 1024 < 5;
      this.fileList = [];
      this.percent = 0;

        if (!supportExtension.includes(extension)) {
          Message({
            message: `上传文件只能是 ${supportExtension.join(",")}格式!`,
            type: "warning"
          });
          return false;
        }
        if (!isLt5M) {
          Message({
            message: "上传文件大小不能超过 5MB!",
            type: "warning"
          });
          return false;
        }

      this.fileList.push(file);
      this.title = "上传文件中";
      return true;
    },

    errorUpload(err, file, fileList) {
      this.title = "上传失败";
      try{
        this.error = JSON.parse(err).msg
      }catch(e){
        this.error = "遇到了未知的网络错误";
      }
    },

    successUpload(response, file, fileList) {
      if (response.code == 0) {
        this.title = "上传成功";
      } else {
        this.title = "上传失败";
        this.error = response.msg || response.message || "服务端发生了错误";
      }
    },

    handleRemove() {},

    handlePreview() {},

    async handleClose() {
      try {
        if (this.showProgress) {
          await this.$confirm("此操作将中止文件上传, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          });
        }
        this.onOk();
      } catch (e) {
        console.error(e);
        return false;
      }
    },

    async cancelUpload() {
      try {
        await this.$confirm("此操作将中止文件上传, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        });

        if (!this.uploadSuccess) {
          this.$refs.upload.abort();
          this.title = "上传失败";
          this.error = "用户取消了文件上传";
        }
      } catch (e) {
        console.error(e);
      }
    },

    reset() {
      this.fileList = [];
      this.$refs.upload.clearFiles();
      this.title = "上传文件";
      this.percent = 0;
    },
    /**
     * 下载名单
     */
    toDown() {}
  }
};
</script>