api封装档案、上报、转运接入

WXL

6 天以前 631c8f37b449b09d19345b76400a39abdb7800f6

 src/components/UploadAttachment/index.vue

@@ -1,35 +1,172 @@
<template>
  <div class="upload-attachment">
    <el-upload
      action="#"
      ref="upload"
      :action="uploadAction"
      :headers="headers"
      :file-list="fileList"
      :auto-upload="false"
      :multiple="true"
      :limit="limit"
      :accept="accept"
      :on-exceed="handleExceed"
      :on-change="handleFileChange"
      :on-remove="handleFileRemove"
      multiple
      :on-success="handleUploadSuccess"
      :on-error="handleUploadError"
      :before-upload="beforeUpload"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">支持jpg、png、pdf、doc、docx等格式，单个文件不超过10MB</div>
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button
        style="margin-left: 10px;"
        size="small"
        type="success"
        @click="submitUpload"
        :disabled="fileList.length === 0"
      >
        上传到服务器
      </el-button>
      <div slot="tip" class="el-upload__tip">
        请上传 {{ accept }} 格式的文件，单个文件不超过10MB，最多可上传{{ limit }}个文件
      </div>
    </el-upload>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";

export default {
  name: "UploadAttachment",
  props: {
    // 文件列表
    fileList: {
      type: Array,
      default: () => []
    },
    // 上传数量限制
    limit: {
      type: Number,
      default: 10
    },
    // 接受的文件类型
    accept: {
      type: String,
      default: ".pdf,.jpg,.jpeg,.png,.doc,.docx,.xls,.xlsx"
    },
    // 上传地址
    uploadUrl: {
      type: String,
      default: process.env.VUE_APP_BASE_API + "/common/upload"
    }
  },
  data() {
    return {
      uploadAction: process.env.VUE_APP_BASE_API + "/common/upload",
      headers: {
        Authorization: "Bearer " + getToken()
      }
    };
  },
  methods: {
    /** 文件选择变化 */
    handleFileChange(file, fileList) {
      this.$emit('change', fileList);
    },

    /** 文件移除 */
    handleFileRemove(file, fileList) {
      this.$emit('change', fileList);
      this.$emit('remove', file);
    },

    /** 上传成功处理 */
    handleUploadSuccess(response, file, fileList) {
      if (response.code === 200) {
        file.url = response.data || response.url;
        this.$message.success('文件上传成功');
        this.$emit('upload-success', {
          file,
          fileList,
          response
        });
      } else {
        this.$message.error(response.msg || '文件上传失败');
      }
    },

    /** 上传错误处理 */
    handleUploadError(err, file, fileList) {
      console.error('上传失败:', err);
      this.$message.error('文件上传失败，请重试');
      this.$emit('upload-error', {
        file,
        fileList,
        error: err
      });
    },

    /** 上传前校验 */
    beforeUpload(file) {
      // 检查文件类型
      const allowedTypes = this.accept.split(',').map(type => type.trim().toLowerCase());
      const fileExtension = '.' + file.name.split('.').pop().toLowerCase();

      if (!allowedTypes.includes(fileExtension) && !allowedTypes.includes(fileExtension.substring(1))) {
        this.$message.error(`不支持的文件格式: ${fileExtension}`);
        return false;
      }

      // 检查文件大小 (10MB限制)
      const isLt10M = file.size / 1024 / 1024 < 10;
      if (!isLt10M) {
        this.$message.error('文件大小不能超过 10MB!');
        return false;
      }

      return true;
    },

    /** 文件数量超出限制 */
    handleExceed(files, fileList) {
      this.$message.warning(`最多只能上传 ${this.limit} 个文件，当前选择了 ${files.length} 个文件`);
    },

    /** 手动提交上传 */
    submitUpload() {
      if (this.fileList.length === 0) {
        this.$message.warning('请先选择要上传的文件');
        return;
      }

      this.$refs.upload.submit();
    },

    /** 清空文件列表 */
    clearFiles() {
      this.$refs.upload.clearFiles();
    },

    /** 获取当前文件列表 */
    getFileList() {
      return this.fileList;
    }
  }
};
</script>

<style scoped>
.upload-attachment {
  width: 100%;
}

::v-deep .el-upload {
  display: block;
}

::v-deep .el-upload__tip {
  margin-top: 8px;
  font-size: 12px;
  color: #909399;
}
</style>