GCLS_Page_TC/src/components/Upload.vue

<!--  -->
<template>
  <div class="upload">
    <el-upload
      :accept="targetAccept"
      class="upload-demo"
      :show-file-list="type === '批量上传' ? false : true"
      :action="url"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :multiple="true"
      :on-exceed="handleExceed"
      :on-success="handleSuccess"
      :file-list="targetFileList"
      :before-remove="beforeRemove"
      :limit="filleNumber"
      :before-upload="handlebeforeUplaod"
    >
      <el-button v-if="type == '批量上传'" type="primary">{{ $t('Key158') }}</el-button>
      <el-button v-else>{{ $t('Key152') }}</el-button>
    </el-upload>
  </div>
</template>

<script>
import { getToken, removeToken } from '../utils/auth';

export default {
  name: 'Upload',
  props: {
    fileList: {
      type: Array,
      default: () => [],
    },
    changeFillId: {
      type: Function,
      default: () => {},
    },
    type: {
      type: String,
      default: '',
    },
    accept: {
      type: String,
      default: '',
    },
    filleNumber: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      targetFileList: null,
      targetAccept: null,
      fileTypeName: '',
      loading: null,
    };
  },
  computed: {
    url() {
      let userInfor = getToken()
        ? JSON.parse(getToken())
        : sessionStorage.getItem('GCLS_Token_Tc')
        ? JSON.parse(sessionStorage.getItem('GCLS_Token_Tc'))
        : null;
      let SessionID = '';
      let UserCode = '';
      let UserType = '';
      if (userInfor) {
        UserCode = userInfor.user_code;
        UserType = userInfor.user_type;
        SessionID = userInfor.session_id;
      }
      return `${process.env.VUE_APP_BASE_API}/GCLSFileServer/WebFileUpload?UserCode=${UserCode}&UserType=${UserType}&SessionID=${SessionID}&SecurityLevel=Mid"`;
    },
  },
  watch: {
    fileList(newval) {
      this.targetFileList = newval || [];
    },
  },
  created() {
    this.targetFileList = this.fileList || [];
    this.targetAccept = this.accept;
  },
  // 方法集合
  methods: {
    handlebeforeUplaod(file) {
      if (file.size > 20 * 1024 * 1024) {
        this.$message.warning('上传文件大小不能超过20M');
        return false; // 必须返回false
      }
      this.loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      });
    },
    handleSuccess(response, file, fileList) {
      if (response.status === 1) {
        this.$message.success(this.$t('Key498'));
        this.loading.close();
        this.changeFillId(response.file_info_list[0], fileList, this.type);
      } else if (response.status === -1) {
        this.loading.close();
        removeToken();
        this.$message.warning(response.error);
        this.$router.push('/login');
      } else {
        this.targetFileList = [];
        this.loading.close();
        // this.$message.warning(response.msg);
      }
    },
    handleRemove(file, fileList) {
      this.changeFillId(file.response, fileList, this.type);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 ${this.filleNumber} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`,
      );
    },
    beforeRemove(file, filleList) {},
  },
};
</script>
<style lang="scss" scoped>
.uploadImage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 100px;
  background: #e5e5e5;
}
</style>