colexiu-project/src/components/col-upload-video/index.tsx

import {
  ElButton,
  ElIcon,
  ElImage,
  ElLoading,
  ElMessage,
  ElUpload
} from 'element-plus'
import { defineComponent, PropType } from 'vue'
import { Document } from '@element-plus/icons-vue'
import styles from './index.module.less'
import iconVideo from './images/icon_video.png'
import request from '@/helpers/request'

export default defineComponent({
  name: 'col-upload-video',
  props: {
    modelValue: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    bucket: {
      type: String,
      default: 'daya'
    },
    multiple: {
      // 是否支持多文件上传
      type: Boolean,
      default: false
    },
    limit: {
      type: Number,
      default: 1
    },
    size: {
      type: Number,
      default: 50 // 默认5M
    },
    accept: {
      type: String,
      // ,.mov,.avi,.flv,.wmv,.mpg,.mpeg,.mpe,.mp3,.wav,.wma,.aac,.m4a,.m4r,.m4v,.3gp,.3g2,.mkv,.webm,.mov,.qt,.mxf,.asf,.asx,.rm,.ram,.rmvb
      default: '.mp4'
    },
    tips: {
      type: String,
      default: '请上传视频'
    },
    extraTips: {
      type: String,
      default: '视频最大不能超过50MB'
    },
    multipleModel: {
      type: Function,
      default: (data: any) => {}
    }
  },
  data() {
    return {
      ossUploadUrl: 'https://ks3-cn-beijing.ksyuncs.com/' + this.bucket,
      dataObj: {
        policy: '',
        signature: '',
        key: '',
        KSSAccessKeyId: '',
        acl: 'public-read',
        name: ''
      },
      fileList: [] as any,
      tempUrls: {} as any,
      responseList: [] as any, // 请求成功之后的数据
      btnLoading: false,
      loading: null as any
    }
  },
  methods: {
    handleSuccess(response: any, uploadFile: any, uploadFiles: any) {
      this.loading?.close()

      // 多文件上传，每个文件上传成功后，将文件的url添加到fileList
      console.log(this.fileList, 'fileList')
      console.log(response, uploadFile, uploadFiles, 'response')
      if (this.multiple) {
        if (uploadFile.status === 'success') {
          this.responseList.push(this.tempUrls[uploadFile.uid])
        }
        // 说明已经上传完成
        if (uploadFiles.length === this.responseList.length) {
          this.btnLoading = false
          this.multipleModel(this.responseList)
        }
      } else {
        let url = this.ossUploadUrl + '/' + this.dataObj.key
        this.$emit('update:modelValue', url)
      }
    },
    handleRemove() {
      console.log('remove')
    },
    handleChange() {
      console.log('handleChange')
    },
    handleProgress(e) {
      console.log('handleProgress', e)
    },
    handleError() {
      this.btnLoading = false
      this.loading?.close()
    },
    async beforeUpload(file: any) {
      // beforeUpload
      console.log(file)
      // let fileType = true
      // if (props.rules.type && props.rules.type.length > 0) {
      //   const fileExtension = file.name.split('.').pop().toUpperCase()
      //   console.log(
      //     props.rules.type,
      //     fileExtension,
      //     props.rules.type.indexOf(fileExtension) != -1
      //   )
      //   if (props.rules.type.indexOf(fileExtension) != -1) {
      //     fileType = true
      //   } else {
      //     fileType = false
      //     ElMessage.error('请上传正确的文件!')
      //     return false
      //   }
      // }

      let isLt2M = true
      if (this.size) {
        isLt2M = file.size / 1024 / 1024 < this.size
        if (!isLt2M) {
          ElMessage.error(`文件大小不能超过${this.size}M!`)
          return false
        }
      }
      if (this.multiple) {
        this.btnLoading = true
      } else {
        this.loading = ElLoading.service({
          target: this.$refs.uploadDom as HTMLElement,
          lock: true,
          fullscreen: false,
          text: '上传中...',
          background: 'rgba(0, 0, 0, 0.7)'
        })
      }
      try {
        let fileName = file.name.replaceAll(' ', '_')
        let key = new Date().getTime() + fileName
        let obj = {
          filename: fileName,
          bucketName: this.bucket,
          postData: {
            filename: fileName,
            acl: 'public-read',
            key: key,
            unknowValueField: []
          }
        }
        const { data } = await request.post('/api-website/getUploadSign', {
          data: obj
        })
        this.dataObj = {
          policy: data.policy,
          signature: data.signature,
          key: key,
          KSSAccessKeyId: data.kssAccessKeyId,
          acl: 'public-read',
          name: fileName
        }
        this.tempUrls[file.uid] = this.ossUploadUrl + '/' + this.dataObj.key
      } catch (e) {
        this.btnLoading = false
        this.loading?.close()
      }
    },
    fileName(name = '') {
      return name.split('/').pop()
    },
    handleExceed(e: any) {
      if (e.length > this.limit) {
        ElMessage.error(`一次性最多只能上传${this.limit}个文件`)
        return false
      }
    }
  },
  render() {
    return (
      <div class={[styles.colUpload, 'w-full']}>
        <ElUpload
          disabled={this.disabled}
          action={this.ossUploadUrl}
          data={this.dataObj}
          onSuccess={this.handleSuccess}
          onRemove={this.handleRemove}
          onChange={this.handleChange}
          onProgress={this.handleProgress}
          onError={this.handleError}
          fileList={this.fileList}
          showFileList={false}
          accept={this.accept}
          beforeUpload={this.beforeUpload}
          onExceed={this.handleExceed}
          ref="uploadRef"
          multiple={this.multiple}
          limit={this.limit}
          class={[
            this.multiple && styles.fileUpload,
            this.disabled && styles.disabled
          ]}
        >
          <div
            ref="uploadDom"
            class={[styles.uploadClass, 'w-full']}
            style={{ height: this.multiple ? '40px' : '106px' }}
          >
            {this.modelValue ? (
              <video
                ref="videoUpload"
                crossorigin="anonymous"
                class={styles.uploadSection}
                src={this.modelValue}
                // poster={iconUploadPoster}
              />
            ) : this.multiple ? (
              <ElButton size="large" type="primary" loading={this.btnLoading}>
                {this.btnLoading ? '上传中...' : '点击上传'}
              </ElButton>
            ) : (
              <div
                class={[
                  styles.uploadSection,
                  'flex items-center flex-col justify-center'
                ]}
              >
                <img src={iconVideo} class="w-8 h-7 mb-3" />
                <p>{this.tips}</p>
              </div>
            )}
          </div>
        </ElUpload>

        {!this.multiple && (
          <p class="text-3 text-[#999999] leading-6 pt-1">{this.extraTips}</p>
        )}
      </div>
    )
  }
})