eep_page/src/components/UploadFile.vue

<template>
  <div class="upload-file">
    <div class="file-area">
      <span class="label-text" v-if="labelText">{{ labelText }}</span>
      <div class="upload-box">
        <el-upload
          v-show="false"
          ref="upload"
          class="file-uploader"
          action="no"
          :accept="acceptFileType"
          :multiple="limit === null || limit > 1"
          :show-file-list="false"
          :auto-upload="false"
          :file-list="fileList"
          :on-change="onFileChange"
          :on-exceed="handleExceed"
          :limit="limit"
        >
          <!-- <el-button>上传附件</el-button> -->
        </el-upload>
        <el-button size="small" type="primary" @click="selectAndUpload"> 本地上传 </el-button>
        <el-button size="small" type="primary" @click="useResource"> 使用资源 </el-button>
      </div>
    </div>
    <div class="upload-tip">{{ uploadTip }}</div>
    <el-divider v-if="showDivider" />
    <ul v-if="fileList.length > 0" slot="file-list" class="file-list">
      <li v-for="(file, i) in fileList" :key="i">
        <div class="file-name">
          <span>
            <SvgIcon v-if="iconClass" :icon-class="iconClass" size="12" />
            <!-- 编辑序号和名称 -->
            <template v-if="content.file_info[file.file_id] && content.file_info[file.file_id].isEdit">
              <el-input v-model="content.file_info[file.file_id].xuhao" placeholder="序号" style="width: 80px" />
              <el-input v-model="content.file_info[file.file_id].file_name" placeholder="名称" />
            </template>
            <!-- 可以编辑序号名称状态下显示序号 -->
            <span v-else>{{
              canEditName && file.file_id
                ? content.file_info[file.file_id].xuhao + content.file_info[file.file_id].file_name
                : (file.file_name ?? file.name)
            }}</span>
            <!-- <span>({{ file.size }})</span> -->
          </span>
          <el-progress
            v-if="file.progress > 0 && file.progress < 100"
            type="circle"
            :percentage="file.progress"
            :width="20"
            color="#2A5AF6"
            stroke-linecap="butt"
            :show-text="false"
          />
          <span v-else-if="file.file_id"> 完成</span>
        </div>
        <SvgIcon icon-class="delete-black" size="12" @click="removeFile(file, i)" />
        <SvgIcon
          v-show="type === 'picture' && file.file_id"
          icon-class="mark"
          size="12"
          @click="viewDialog(file.file_id)"
        />
        <!-- 编辑名称和序号 -->
        <template v-if="canEditName && file.file_id">
          <SvgIcon
            v-if="content.file_info[file.file_id].isEdit"
            icon-class="icon-save"
            size="12"
            @click="changeIsEdit(content.file_info[file.file_id])"
          />
          <SvgIcon v-else icon-class="icon-edit" size="12" @click="changeIsEdit(content.file_info[file.file_id])" />
        </template>
      </li>
    </ul>
    <SelectResource
      :visible.sync="visibleResource"
      :project-id="projectId"
      :accept="accept"
      :courseware-id="coursewareId"
      from-page="remark"
      @selectResource="selectResource"
    />
  </div>
</template>

<script>
import { fileUpload } from '@/api/app';
import { conversionSize } from '@/utils/common';
import { isEnable } from '@/views/book/courseware/data/common';
import { getConfig, getToken } from '@/utils/auth';

import SelectResource from '@/views/book/courseware/create/components/base/common/SelectResource.vue';
import { SubmitFileToResourceStore } from '@/api/book';
export default {
  name: 'UploadFile',
  components: {
    SelectResource,
  },
  props: {
    // 项目id
    projectId: {
      type: String,
      default: '',
    },
    // 课件id
    coursewareId: {
      type: String,
      default: '',
    },
    // 组件id
    componentId: {
      type: String,
      default: '',
    },
    // 组件标签
    labelText: {
      type: String,
      default: '',
    },
    // 上传支持的文件格式
    acceptFileType: {
      type: String,
      default: '*',
    },
    // 提示语
    uploadTip: {
      type: String,
      default: '',
    },
    // 图标
    iconClass: {
      type: String,
      default: '',
    },
    fileList: {
      type: Array,
      default: () => [],
    },
    fileIdList: {
      type: Array,
      default: () => [],
    },
    fileInfoList: {
      type: Array,
      default: () => [],
    },
    type: {
      type: String,
      default: '',
    },
    singleSize: {
      type: Number,
      default: 100,
    },
    totalSize: {
      type: Number,
      default: 1024,
    },
    limit: {
      type: Number,
      default: null,
    },
    canEditName: {
      type: Boolean,
      default: false,
    },
    fileInfo: {
      type: Object,
      default: () => ({}),
    },
    index: {
      // 如果是二维数组里循环上传 一维索引
      type: Number,
      default: null,
    },
    indexs: {
      // 如果是二维数组里循环上传 二维索引
      type: Number,
      default: null,
    },
    // 是否显示分割线
    showDivider: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      curFile: null,
      conversionSize,
      visible: false,
      content: {
        file_list: this.fileList,
        file_id_list: this.fileIdList,
        file_info_list: this.fileInfoList,
        file_info: this.fileInfo,
      },
      visibleResource: false,
      isEnable,
    };
  },
  computed: {
    accept() {
      let accept = '*';
      if (this.acceptFileType.includes('.jpg')) {
        accept = 'image';
      } else if (this.acceptFileType.includes('.mp4')) {
        accept = 'video';
      } else if (this.acceptFileType.includes('.mp3')) {
        accept = 'audio';
      } else if (this.acceptFileType.includes('.zip')) {
        accept = 'h5_game';
      } else if (this.acceptFileType.includes('.txt')) {
        accept = 'text';
      }
      return accept;
    },
  },
  watch: {
    content: {
      handler(val) {
        this.$emit('updateFileList', val, this.index, this.indexs);
      },
      deep: true,
    },
  },
  methods: {
    selectAndUpload() {
      const uploadInput = this.$refs.upload.$el.querySelector('input[type="file"]');
      if (uploadInput) {
        uploadInput.value = '';
        uploadInput.click();
      }
    },
    // 显示自定义样式文件列表
    onFileChange(file, fileList) {
      this.afterSelectFile(file);
      fileList.forEach((file) => {
        if (!file.progress || file.progress <= 0) file.progress = 0;
      });
      const lists = this.$refs.upload.uploadFiles;
      if (lists.length === 0) return;
      const files = lists.filter((item) => {
        let find = this.content.file_list.findIndex((p) => p.uid === item.uid);
        return find === -1;
      });
      if (this.limit !== null && this.content.file_list.length + files.length > this.limit) {
        this.$message.warning(
          `当前限制选择 ${this.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
            files.length + this.content.file_list.length
          } 个文件`,
        );
        return;
      }
      this.content.file_list = [...this.content.file_list, ...files];
      // 选中文件后自动上传
      this.uploadFiles();
    },

    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 ${this.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`,
      );
    },

    // 删除文件
    removeFile(file, i) {
      this.$confirm('是否删除当前文件？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$refs.upload.handleRemove(file);
          this.content.file_list.splice(i, 1);
          this.content.file_id_list.splice(i, 1);
        })
        .catch(() => {});
    },

    // 文件校验
    afterSelectFile(file) {
      const fileName = file.name;
      let singleSizeTip = `文件[${fileName}]大小超过${conversionSize(this.singleSize * 1024 * 1024)},被移除！`;
      if (file.size > this.singleSize * 1024 * 1024) {
        this.$message.error(singleSizeTip);
        this.$refs.upload.handleRemove(file);
        return false;
      }

      const suffix = fileName.slice(fileName.lastIndexOf('.') + 1, fileName.length).toLowerCase();
      let fileType = [];
      let typeTip = '';

      if (this.type === 'audio') {
        fileType = ['mp3', 'acc', 'wma', 'wav'];
        typeTip = '音频文件只能是 mp3、acc、wma、wav格式!';
      } else if (
        this.type === 'picture' ||
        this.type === 'image_text' ||
        this.type === 'drawing' ||
        this.type === 'character_structure' ||
        this.type === 'newWord_template' ||
        this.type === 'character'
      ) {
        fileType = ['jpg', 'png', 'jpeg'];
        typeTip = '图片文件只能是 jpg、png、jpeg 格式!';
      } else if (this.type === 'video' || this.type === 'video_interaction') {
        fileType = ['mp4'];
        typeTip = '视频文件只能是 mp4 格式!';
      } else if (this.type === 'upload_preview' || this.type === 'video_interaction_file') {
        fileType = [
          'png',
          'jpg',
          'jpeg',
          'txt',
          'pdf',
          'doc',
          'docx',
          'xls',
          'xlsx',
          'ppt',
          'pptx',
          'mp3',
          'wma',
          'mp4',
          'mov',
          'zip',
          'rar',
        ];
        typeTip = '文件不支持';
      } else if (this.type === 'h5_games') {
        fileType = ['zip', 'html'];
        typeTip = 'H5游戏文件只能是 zip、html 格式!';
      } else if (this.type === '3DModel') {
        fileType = ['fbx', 'zip', 'gltf', 'glb'];
        typeTip = '3D模型文件只能是 fbx、gltf、glb、zip 格式!';
      } else if (this.type === 'upload_remark') {
        fileType = [
          'png',
          'jpg',
          'jpeg',
          'mp3',
          'mp4',
          'zip',
          'rar',
          'txt',
          'pdf',
          'doc',
          'docx',
          'xls',
          'xlsx',
          'ppt',
          'pptx',
        ];
        typeTip = '文件不支持';
      }
      const isNeedType = fileType.includes(suffix);
      if (!isNeedType) {
        typeTip += `,[${fileName}]被移除！`;
        this.$message.error(typeTip);
        this.$refs.upload.handleRemove(file);
        return false;
      }
    },

    // 上传文件
    uploadFiles() {
      const files = (this.content.file_list || []).filter((file) => file.uid && file.status !== 'success');
      if (files.length <= 0) {
        this.$message.error('没有需要上传的文件！');
        return false;
      }
      const totalSize = files.reduce((sum, cur) => sum + Number(cur.size || 0), 0);
      if (totalSize > this.totalSize * 1024 * 1024) {
        this.$message.error(`文件总大小不能超过${conversionSize(this.totalSize * 1024 * 1024)}!`);
        return false;
      }

      files
        .filter((p) => {
          let pro = p.progress || -1;
          return pro <= 0;
        })
        .forEach((file) => {
          // 添加验证
          if (!file.raw || !(file.raw instanceof Blob)) {
            this.$message.error(`文件 ${file.name} 无效，请删除后重新选择！`);
            return;
          }
          let form = new FormData();
          form.append(file.name, file.raw, file.name);
          fileUpload('Mid', form, {
            handleUploadProgress: (progressEvent) => {
              // 进度到99等服务器返回文件信息后才算实际完成
              let per = Number((progressEvent.progress * 99).toFixed(2) || 0);
              let en = this.content.file_list.find((p) => p.uid === file.uid);
              if (en) {
                en.progress = per;
                this.$forceUpdate();
              }
            },
          }).then(({ file_info_list }) => {
            let file_index = this.content.file_list.findIndex((p) => p.uid === file.uid);
            if (file_index > -1) {
              if (this.type === 'picture') {
                this.content.file_info_list[file_index] = {
                  file_id: file_info_list[0].file_id,
                  file_name: file_info_list[0].file_name,
                  title: '',
                  intro: '',
                };
              }
              this.content.file_list[file_index] = {
                file_id: file_info_list[0].file_id,
                file_name: file_info_list[0].file_name,
                file_url: file_info_list[0].file_url,
              };
              if (this.canEditName) {
                let obj = {
                  xuhao: '',
                  isEdit: false,
                  file_name: file_info_list[0].file_name,
                };
                this.$set(this.content.file_info, file_info_list[0].file_id, obj);
              }
              this.content.file_id_list.push(file_info_list[0].file_id);
              this.$refs.upload.uploadFiles = [];
              this.$forceUpdate();
            }
          });
        });
    },

    // 显示弹窗
    viewDialog(file_id) {
      if (file_id) this.visible = true;
      this.curFile = this.content.file_info_list.find((file) => file.file_id === file_id);
    },

    // 给文件加介绍
    fillDescribeToFile(file) {
      let en = this.content.file_info_list.find((p) => p.file_id === file.file_id);
      if (en) {
        Object.assign(en, file);
      }
    },
    // 使用资源
    useResource() {
      this.visibleResource = true;
    },
    selectResource({ file_id, file_name, file_url, intro }) {
      this.content.file_list.push({ file_id, file_name, file_url });
      this.content.file_id_list.push(file_id);
      this.content.file_info_list.push({ file_id, file_name, title: '', intro });
      if (this.canEditName) {
        let obj = {
          xuhao: '',
          isEdit: false,
          file_name,
        };
        this.$set(this.content.file_info, file_id, obj);
      }
      this.visibleResource = false;
    },
    // 编辑文件名及序号
    changeIsEdit(file) {
      file.isEdit = !file.isEdit;
    },
  },
};
</script>

<style lang="scss" scoped>
.file-area {
  display: flex;
  column-gap: 16px;
  align-items: center;

  .label-text {
    font-size: 14px;
    color: $font-light-color;
  }

  div {
    flex: 1;
  }
}

.el-divider {
  margin: 16px 0;
}

.upload-tip {
  margin-bottom: 16px;
  font-size: 12px;
  color: #86909c;
}

.upload-box {
  // display: flex;
  // justify-content: space-between;

  .el-button + .el-button {
    margin-left: 2px;
  }

  .file-uploader {
    flex: 1;

    :deep .el-upload {
      &--text {
        width: 100%;
        background-color: $fill-color;
        border-radius: 2px 0 0 2px;

        .el-button {
          width: 100%;
          color: #86909c;
          text-align: left;
        }
      }
    }
  }

  .el-button {
    border-radius: 0 2px 2px 0;
  }
}

.old_file_list {
  margin-top: 16px;
}

.file-list {
  display: flex;
  flex-direction: column;
  row-gap: 16px;

  li {
    display: flex;
    column-gap: 12px;
    align-items: center;

    .file-name {
      display: flex;
      column-gap: 14px;
      align-items: center;
      justify-content: space-between;
      max-width: 500px; // 360px有点窄
      padding: 8px 12px;
      font-size: 14px;
      color: #1d2129;
      background-color: #f7f8fa;

      span {
        display: flex;
        column-gap: 14px;
        align-items: center;
      }
    }

    .svg-icon {
      cursor: pointer;
    }
  }
}
</style>