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

import request from '@/helpers/request'
import { Icon, Toast, Uploader, Image } from 'vant'
import { defineComponent } from 'vue'
import styles from './index.module.less'
import { useCustomFieldValue } from '@vant/use'
import { browser } from '@/helpers/utils'
import umiRequest from 'umi-request'
import iconUploader from '@common/images/icon_uploader_video.png'
import iconUploadPoster from '@common/images/icon_upload_poster.png'
import { postMessage } from '@/helpers/native-message'
import { getOssUploadUrl, state } from '@/state'
import { getUploadSign, onOnlyFileUpload } from '@/helpers/oss-file-upload'

export default defineComponent({
  name: 'ColUploadVideo',
  props: {
    modelValue: String,
    posterUrl: String,
    tips: {
      type: String,
      default: '点击上传'
    },
    nativeUpload: {
      // 是否使用原生上传, 且当前环境为app才会生效
      type: Boolean,
      default: true
    },
    size: {
      type: Number,
      default: 30
    },
    deletable: {
      type: Boolean,
      default: true
    },
    bucket: {
      type: String,
      default: 'daya'
    }
  },
  methods: {
    beforeRead(file: any) {
      const isLt2M = file.size / 1024 / 1024 < this.size
      // console.log(this.size)
      if (!isLt2M) {
        Toast(`上传视频大小不能超过 ${this.size}MB`)
        return false
      }
      return true
    },
    beforeDelete(file: any, detail: { index: any }) {
      // this.dataModel.splice(detail.index, 1)
      return true
    },
    async afterRead(file: any, detail: any) {
      try {
        file.status = 'uploading'
        file.message = '上传中...'
        // 获取签名
        // const signUrl =
        //   state.platformType === 'TEACHER'
        //     ? '/api-teacher/getUploadSign'
        //     : '/api-student/getUploadSign'

        const fileName = file.file.name.replaceAll(' ', '_')
        const key = new Date().getTime() + fileName
        console.log(file)

        // const res = await request.post(signUrl, {
        //   data: {
        //     filename: fileName,
        //     bucketName: this.bucket,
        //     postData: {
        //       filename: fileName,
        //       acl: 'public-read',
        //       key: key
        //     }
        //   }
        // })
        const { data } = await getUploadSign({
          filename: key,
          bucketName: this.bucket,
          postData: {
            filename: key,
            acl: 'public-read',
            key: key
          }
        })
        Toast.loading({
          message: '加载中...',
          forbidClick: true,
          loadingType: 'spinner',
          duration: 0
        })
        const obj = {
          policy: data.policy,
          signature: data.signature,
          key: key,
          KSSAccessKeyId: data.kssAccessKeyId,
          acl: 'public-read',
          name: key,
          file: file.file
        }
        const uploadUrl = await onOnlyFileUpload(
          getOssUploadUrl(this.bucket),
          obj
        )
        // const formData = new FormData()
        // for (const key in obj) {
        //   formData.append(key, obj[key])
        // }
        // formData.append('file', file.file)
        // await umiRequest(getOssUploadUrl(this.bucket), {
        //   method: 'POST',
        //   data: formData
        // })
        // const uploadUrl = getOssUploadUrl(this.bucket) + key
        Toast.clear()
        this.$emit('update:modelValue', uploadUrl)
        // this.onUploadChange(uploadUrl)
        // let formData = new FormData()
        // formData.append('file', file.file)
        // let res = await request.post('/api-teacher/uploadFile', {
        //   data: formData
        // })
        // const url = res.data.url
        // this.$emit('update:modelValue', uploadUrl)
      } catch (error) {
        //
        console.log(error)
      }
    },
    onClose(e: any) {
      this.$emit('update:modelValue', null)
      e.stopPropagation()
    },
    onNativeUpload() {
      postMessage(
        { api: 'chooseFile', content: { type: 'video', bucket: this.bucket } },
        (res: any) => {
          // this.posterUrlInner = res.firstFrameImg
          this.$emit('update:modelValue', res.fileUrl)
          // this.$emit('update:posterUrl', res.firstFrameImg)
        }
      )
    },
    getVideoBase64(url: string) {
      return new Promise(function (resolve) {
        let dataURL = ''
        const video = document.createElement('video')
        video.setAttribute('crossOrigin', 'anonymous') // 处理跨域
        video.setAttribute('src', url)
        video.setAttribute('preload', 'auto')
        video.addEventListener('loadeddata', function () {
          console.log(video, 'video loadeddata')
          const canvas = document.createElement('canvas')
          console.log('video.clientWidth', video.videoWidth) // 视频宽
          console.log('video.clientHeight', video.videoHeight) // 视频高
          const width = video.videoWidth || 750 // canvas的尺寸和图片一样
          const height = video.videoHeight || 500 // 设置默认宽高为 750 * 500
          canvas.width = width
          canvas.height = height
          ;(canvas as any)
            .getContext('2d')
            .drawImage(video, 0, 0, width, height) // 绘制canvas
          dataURL = canvas.toDataURL('image/jpeg') // 转换为base64
          resolve(dataURL)
        })
      })
    }
  },
  render() {
    useCustomFieldValue(() => this.modelValue)
    return (
      <div class={styles['uploader-section']}>
        {this.modelValue && this.deletable ? (
          <Icon
            name="cross"
            onClick={this.onClose}
            class={styles['img-close']}
          />
        ) : null}
        {browser().isApp && this.nativeUpload ? (
          <div onClick={this.onNativeUpload} style={{ height: '100%' }}>
            {this.modelValue ? (
              <video
                ref="videoUpload"
                class={styles.uploadImg}
                src={this.modelValue + '#t=1,4'}
                // poster={iconUploadPoster}
              />
            ) : (
              <div class={styles.uploader}>
                <Icon name={iconUploader} size="32" />
                <p class={styles.uploaderText}>{this.tips}</p>
              </div>
            )}
          </div>
        ) : (
          <>
            {/* @ts-ignore */}
            <Uploader
              accept=".mp4"
              afterRead={this.afterRead}
              beforeRead={this.beforeRead}
              beforeDelete={this.beforeDelete}
              v-slots={{
                default: () =>
                  this.modelValue ? (
                    <video
                      ref="videoUpload"
                      class={styles.uploadImg}
                      src={this.modelValue + '#t=1,4'}
                      // poster={this.posterUrl || ''}
                    />
                  ) : (
                    <div class={styles.uploader}>
                      <Icon name={iconUploader} size="32" />
                      <p class={styles.uploaderText}>{this.tips}</p>
                    </div>
                  )
              }}
            />
          </>
        )}
      </div>
    )
  }
})