el-upload 自定义文件上传 http-request

fileUpload.vue

<!-- 一次只上传一个文件 -->
<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
        name="fileUpload"
        :accept="accept"
        :action="uploadFileUrl"
        :show-file-list="false"
        :before-upload="handleBeforeUpload"
        :http-request="httpRequest"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">上传查询授权文件</div>
        <div slot="tip" class="el-upload__tip">
          仅支持doc docx pdf png jpeg jpg xls xlsx格式，文件大小不超过5M
        </div>
      </el-upload>
      <div class="upload-main">
        <p v-for="(item, index) in uploadList" :key="'upload' + index">
          <el-button class="file-name" type="text">
            {{ item.originFileName }}
          </el-button>
          <el-button
            v-if="showDelBtn"
            type="text"
            icon="el-icon-delete"
            @click="delUpload(index)"
          ></el-button>
        </p>
      </div>
    </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>
import { uploadAPI } from "@/api/common.js";
export default {
  props: {
    //查看时隐藏文件列表的删除按钮
    showDelBtn: {
      type: Boolean,
      default: true,
    },
    // 大小限制(M)
    fileSize: {
      type: Number,
      default: 5,
    },
    fileType: {
      type: Array,
      default: () => ["doc", "docx", "xls", "xlsx", "jpg", "jpeg", "png", "pdf"],
    },
  },
  data() {
    return {
      dialogVisible: false,
      uploadFileUrl: "", // 文件上传地址
      uploadList: [],
      number: 0,
    };
  },
  computed: {
    // 拼接字符串".doc,.docx,.pdf"
    accept() {
      let arr = this.fileType.map((val) => {
        return ".".concat(val);
      });
      return arr.join(", ");
    },
  },
  methods: {
    // 点击查询按钮
    submit() {
      // this.$parent.uploadLoading = true;
      this.dialogVisible = false;
      // setTimeout(() => {
      //   this.$parent.uploadLoading = false;
      // }, 3000);
    },
    cancel() {
      this.dialogVisible = false;
    },

    // 上传文件之前的钩子：上传前校检格式和大小
    handleBeforeUpload(file) {
      this.uploadList = [];

      // 校检文件类型
      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;
        }
      }

      this.$modal.loading("正在上传文件，请稍候...");
      this.number++;
      console.log(file);
      return true;
    },
    httpRequest(options) {
      const { file, onSuccess, onError } = options;
      let type = '';
      switch (this.$route.name) {
        case "communications":
          type = 'RC_COMMUNICATION';
          break;
        case "together":
          type = 'RC_SAME_BEHAVIOR';
          break;
      }
      let formData = new FormData();
      formData.append("file", file);
      formData.append("fileType", type);
      uploadAPI(formData)
        .then((res) => {
          if (res.code == 200) {
            this.uploadList.push(res.data);
            this.$message.success("文件已上传");
          }
          this.$modal.closeLoading();
        })
        .catch(() => {
          this.$message.error("上传失败");
          this.$modal.closeLoading();
        });
    },
    delUpload(index) {
      this.uploadList.splice(index, 1);
    },
  },
};
</script>

<style scoped lang="scss">
.upload-file {
  ::v-deep .el-upload {
    width: 100%;
    .el-upload-dragger {
      height: 150px;
      width: 100%;
    }
  }
  ::v-deep .el-upload__tip {
    line-height: 20px;
  }
  .upload-main {
    min-height: 50px;
    max-height: 140px;
    overflow-y: auto;
    line-height: 20px;
    font-size: 14px;
    margin-top: 10px;
  }
  .file-name {
    margin-right: 10px;
    max-width: 300px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    font-size: 14px;
    padding: 0px;
    margin: 0px;
    border: none;
    line-height: 20px;
    color: #3c72cc;
  }
}
</style>