el-upload drag 拖拽上传

手动上传

1. :show-file-list="true"时自带的文件列表数组是uploadFiles=[]
2. name="file" 接口的参数名是"file"

3. this.$refs.upload.submit();实现手动上传
4. 设置一次上传一个文件

<template>
<el-dialog
    title="批量查询"
    :visible.sync="dialogVisible"
    width="610px"
    append-to-body
    :close-on-click-modal="false"
    :before-close="cancel"
  >
    <div class="upload-file">
      <el-upload
        drag
        ref="upload"
        name="file"
        :limit="limit"
        :accept="accept"
        :action="uploadFileUrl"
        :auto-upload="false"
        :show-file-list="true"
        :on-change="handleBeforeUpload"
        :on-error="handleUploadError"
        :on-exceed="onExceed"
        :on-success="handleUploadSuccess"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">上传批量查询文件</div>
        <div slot="tip" class="el-upload__tip">
          <p>批量查询说明:</p>
          <p>1）仅支持xls、xlsx结尾的格式文件，文件名不可更改。</p>
          <p>2）单次批量上传查询条件上限为999条，单个文件大小不超过5M。</p>
        </div>
      </el-upload>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" @click="cancel">取 消</el-button>
      <el-button size="mini" type="primary" @click="submit">查 询</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: {
    //查看时隐藏文件列表的删除按钮
    showDelBtn: {
      type: Boolean,
      default: true,
    },
    fileUrl: {
      type: String,
      default: "rs/relation/check/ct/createBatch",
    },
    // 大小限制(M)
    fileSize: {
      type: Number,
      default: 5,
    },
    // 数量限制
    limit: {
      type: Number,
      default: 1,
    },
    fileType: {
      type: Array,
      default: () => ["xls", "xlsx"],
    },
  },
  data() {
    return {
      dialogVisible: false,
    };
  },
  computed: {
    // 拼接字符串".doc,.docx,.pdf"
    accept() {
      let arr = this.fileType.map((val) => {
        return ".".concat(val);
      });
      return arr.join(", ");
    },
    // 文件上传地址
    uploadFileUrl(){
        return process.env.VUE_APP_BASE_API + this.fileUrl;
    },
  },
  methods: {
    // 点击批量查询按钮
    submit(){
      if(this.$refs.upload.uploadFiles.length > 0){
        this.$confirm('点击“确定”，将进入查询审批流程。', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$refs.upload.submit();
        }).catch(() => {
          this.dialogVisible = false; // 取消
        });
      }else{
        this.$message.error(`请上传批量查询文件`);
      }
    },
    cancel(){
      this.dialogVisible = false;
      this.$refs.upload.uploadFiles=[];
    },
    onExceed(){
      this.$message.error(`最多上传 ${this.limit}个文件`);
    },
    // 文件上传失败时的钩子：上传失败
    handleUploadError(err) {
        this.$message.error("上传失败");
    },

    // 上传文件之前的钩子：上传前校检格式和大小
    handleBeforeUpload(file) {
      // 校检文件类型
      if (this.fileType) {
        const fileName = file.name.split(".");
        const fileExt = fileName[fileName.length - 1]; // 文件扩展名
        const isTypeOk = this.fileType.indexOf(fileExt) >= 0;
        if (!isTypeOk) {
          this.$message.error(`支持文件类型：${this.accept}`);
          return false;
        }
      }

      // 校检文件大小
      if (this.fileSize) {
        if (file.size == 0) {
          this.$message.error(`上传文件需大于0KB`);
          return false;
        }
        const isLt = file.size / 1024 / 1024 < this.fileSize;
        if (!isLt) {
          this.$message.error(`单个文件大小不超过${this.fileSize}M`);
          return false;
        }
      }
      return true;
    },
    // 文件上传成功时的钩子：上传成功回调
    handleUploadSuccess(res, file) {
      if (res.code == 200) {
        this.dialogVisible = false; // 确定
        this.$refs.upload.uploadFiles=[];
        this.$message.success("上传成功");
      } else {
        this.$refs.upload.uploadFiles=[];
        this.$message.error(res.msg);
      }
      
    },
  },
};
</script>