element 上传-Upload

<template>
  <g-dialog 
      @confirm="confirm" //点击确认
      :dialogVisible.sync="dialogVisible"
      width="460"
      :center="true"
      title="导入扫描件"
      :isUpload="true"> //是否上传,上传的话手动关闭dialog,否则上传清空数组会失败  
    <el-upload
        action="api.php/mistakeTitle/addTitleAnnex"
        ref="upload"
        class="upload-demo"
        :on-change="uploadChange" //文件发生改变
        :on-progress="onProgress"  //上传时
        :on-success="uploadSuccess" //上传成功
        :on-error="uploadError" //上传失败
        :on-remove="uploadRemove" //文件移除
        drag //拖动
        accept=".zip" //文件格式
        :file-list="fileList" //文件数组
        :limit="1" //文件个数
        :auto-upload="false" //自动上传
        :headers="httpHeader" //附带请求头       
        :data="{title_id,student_id}" //附带参数
               >
  </g-dialog>        
</template>
    
<script>
import { Loading } from "element-ui";
export default {
  data() {
    return {
      httpHeader: {
        token: localStorage.getItem("token"),
        uid: localStorage.getItem("uid")
      }，
      dialogVisible:false,
      fileList: [], //上传文件
      Loading: "" //Loding实例
    };
  },
  methods: {
    //这里限制上传格式或者大小  
    uploadChange(file, fileList) {
      this.fileList = fileList;
      var type = file.name.substring(file.name.lastIndexOf(".") + 1);
      let flag = type === "zip";
      if (!flag) {
        this.fileList = [];
        this.$message.warning("请上传zip格式文件");
      }
      return flag;
    },
    //开启弹框  
    onProgress() {
      this.Loading = Loading.service({
        text: "正在上传中",
        background: "rgba(255, 255, 255, 0.5)",
        target: "body"
      });
    },
    //上传成功,这里才手动关闭dialog  
    uploadSuccess() {
      this.Loading.close();
      this.fileList = [];//清空数组
      this.$refs.upload.clearFiles();//清空已上传的文件
      this.$message.success("操作成功");
      this.dialogVisible = false;
      //重新发送获取表格
      this.onSubmit();
    },
    uploadError() {
      this.Loading.close();
      this.$message.success("操作成功");
      this.dialogVisible = false;
    },
    uploadRemove(file, fileList) {
      this.fileList = fileList;
    },
    //当弹窗点击确定,手动调用upload上传功能  
    confirm() {
      this.$refs.upload.submit();
    }
  }
};
</script>    

element 上传-Upload

原文：https://www.cnblogs.com/cjh1996/p/12842403.html