caimei-authentic-www/components/SimpleOssUpload/index.vue

<template>
  <div class="simple-oss-upload">
    <template v-if="fileList.length < limit">
      <div class="button" @click="onChooseFile">本地上传</div>
      <input
        v-show="false"
        id="file"
        ref="ossFileInput"
        type="file"
        :accept="accept"
        multiple
        @change="onFileChange"
      />
    </template>
    <div class="file-list">
      <template v-for="(file, index) in fileList">
        <div class="file" :key="file.uuid">
          <div class="name">{{ file.name }}</div>
          <div class="control">
            <span class="play" @click="onPlay(file)">播放</span>
            <span class="remove" @click="onAbortUpload(file, index)">删除</span>
          </div>
          <div class="progress">
            <el-progress
              :percentage="file.percentage"
              :show-text="false"
              color="#F3920D"
            ></el-progress>
            <div class="status">
              <span>{{ file.percentage }}%</span>
              <span v-if="file.status === 1">上传成功</span>
              <span v-if="file.status === 2">上传中</span>
              <span v-if="file.status === 0">上传失败</span>
            </div>
          </div>
        </div>
      </template>
    </div>
    <SimpleVideoPlayer
      :videoSrc="currentVideoUrl"
      ref="videoPlayer"
    ></SimpleVideoPlayer>
  </div>
</template>

<script>
import OssUploadUtils from './upload'
export default {
  props: {
    accept: {
      type: String,
      default: '.mp4',
    },
    limit: {
      type: Number,
      default: 9,
    },
  },
  data() {
    return {
      videoDialog: true,
      currentVideoUrl: '',
      ossUpload: null,
      fileList: [],
    }
  },
  methods: {
    // 播放视频
    onPlay(rawFile) {
      this.currentVideoUrl = URL.createObjectURL(rawFile.file)
      this.$refs.videoPlayer.open()
    },
    // 选择文件
    onChooseFile() {
      this.$nextTick(() => {
        this.$refs.ossFileInput.click()
      })
    },
    // 文件选中
    onFileChange(e) {
      this.ossUpload = new OssUploadUtils(this, {
        success: this.onSuccess,
        progress: this.onProgress,
        faild: this.onFaild,
      })
      this.ossUpload.upload(e.target.files[0])
    },
    // 取消上传
    async onAbortUpload(file, index) {
      try {
        this.fileList.splice(index, 1)
        const { checkpoint } = file
        await this.ossUpload.abortMultipartUpload(checkpoint)
      } catch (error) {
        console.log(error)
      }
    },
    // 上传进度
    onProgress(file, fileList) {
      this.fileList = fileList
      this.$emit('progress', { file, fileList })
    },
    // 上传成功
    onSuccess(file, fileList) {
      console.log(file)
      this.fileList = fileList
      this.$emit('success', { file, fileList })
    },
    // 上传失败
    onFaild(file, fileList) {
      this.fileList = fileList
      this.$emit('faild', { file, fileList })
    },
  },
}
</script>

<style lang="scss" scoped>
@media screen and (min-width: 768px) {
  .simple-oss-upload {
    .button {
      width: 104px;
      height: 36px;
      text-align: center;
      line-height: 36px;
      background: #f3920d;
      color: #fff;
      border-radius: 4px;
      cursor: pointer;
    }

    .file-list {
      line-height: initial;
      margin-top: 16px;
      .file {
        padding: 8px 0;
        position: relative;
        .name {
          font-size: 16px;
          margin-bottom: 18px;
          margin-right: 80px;
          color: #666;
        }
        .control {
          position: absolute;
          top: 8px;
          right: 0;
          span {
            font-size: 16px;
            cursor: pointer;

            &.play {
              color: #1890ff;
              margin-right: 12px;
            }

            &.remove {
              color: #f3920d;
            }
          }
        }
        .progress {
          padding-right: 120px;
          position: relative;
          .status {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-53%);
            font-size: 16px;
            color: #f3920d;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .simple-oss-upload {
    .button {
      width: 24vw;
      height: 8.8vw;
      text-align: center;
      line-height: 8.8vw;
      background: #f3920d;
      color: #fff;
      border-radius: 0.4vw;
      font-size: 3.2vw;
      cursor: pointer;
    }

    .file-list {
      line-height: initial;
      margin-top: 3.2vw;
      .file {
        position: relative;
        margin-bottom: 7.2vw;

        &:last-child {
          margin-bottom: 0;
        }

        .name {
          font-size: 3.2vw;
          margin-bottom: 3.2vw;
          margin-right: 22vw;
          color: #666;
        }
        .control {
          position: absolute;
          top: 0.2vw;
          right: 0;
          span {
            font-size: 3.2vw;
            cursor: pointer;

            &.play {
              color: #1890ff;
              margin-right: 2.8vw;
            }

            &.remove {
              color: #f3920d;
            }
          }
        }
        .progress {
          padding-right: 22vw;
          position: relative;
          .status {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-53%);
            font-size: 3.2vw;
            color: #f3920d;
          }
        }
      }
    }
  }
}
</style>