GCLS_Page_TC/src/views/wordcard/UploadDrag.vue

<template>
  <div class="upload-wrapper upload-wrapper-drag">
    <el-upload
      ref="upload"
      accept=".jpg,.png"
      drag
      :before-upload="beforeUpload"
      :action="url"
      :on-exceed="handleExceed"
      :limit="limit"
      :on-success="handleSuccess"
      :file-list="fileList"
      :disabled="disabled"
      :on-progress="uploadVideoProcess"
    >
      <div class="plus-icon"><i class="el-icon-plus"></i></div>
      <div class="cn-tips">点击或拖拽图片到此上传</div>
      <div class="en-tips">Only png, jpg can be uploaded, and the size does not exceed 100MB</div>
    </el-upload>
    <el-progress style="width: 100%" v-if="progressFlag" :percentage="loadProgress"></el-progress>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth';
export default {
  name: 'UploadAudio',
  props: {
    limit: {
      type: Number,
      default: 1,
    },
    itemIndex: {
      type: Number,
      default: null,
    },
    fileList: {
      type: Array,
      default: () => [],
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loadProgress: 0, // 动态显示进度条
      progressFlag: false, // 关闭进度条
    };
  },
  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: {},
  methods: {
    beforeUpload(file) {
      // 可以用来限制文件大小
      if (file.size > 100 * 1024 * 1024) {
        this.$message.warning('上传图片大小不能超过100M');
        return false; // 必须返回false
      }
    },
    upload(file) {},
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 ${this.limit ? this.limit : 1} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`,
      );
    },
    handleSuccess(response, file, fileList) {
      if (response.status === 1) {
        this.$message.success('上传成功');
        this.progressFlag = false;
        this.$emit('changeFillId', response.file_info_list[0], fileList);
      }
    },
    onProgress(event, file, fileList) {
      let num = ((event.loaded / event.total) * 100) | 0; //百分比
      this.curPercentage = num;
      if (this.curPercentage == 100) {
        this.isShowJinDuTiao = false;
        this.curPercentage = 0;
      }
    },
    uploadVideoProcess(event, file, fileList) {
      this.progressFlag = true; // 显示进度条
      this.loadProgress = parseInt(event.percent); // 动态获取文件上传进度
      // if (this.loadProgress >= 100) {
      //   this.loadProgress = 100;
      //   setTimeout(() => {
      //     this.progressFlag = false;
      //   }, 1000); // 一秒后关闭进度条
      // }
    },
  },
};
</script>
<style lang="scss" scoped>
.upload-wrapper {
  height: 294px;
  background-color: #f2f3f5;
  border-radius: 8px;
  overflow: hidden;
  .plus-icon {
    margin: 95px auto 20px auto;
    color: #4e5969;
  }
  .cn-tips {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: #1d2129;
  }
  .en-tips {
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    color: #86909c;
  }

  .el-image {
    background: #f2f3f5;
  }
}
</style>
<style lang="scss">
.upload-wrapper-drag {
  .el-upload {
    width: 100%;
    height: 274px;
  }
  .el-upload-dragger {
    border: none;
    background-color: transparent;
    width: 100%;
    height: 100%;
  }
}
</style>