Vue implementiert Video-Upload-Funktion

<Vorlage>
  <div Klasse="Container">
    <el-Karte>
      <div slot="Kopfzeile">
        <div>Kurs:</div>
        <div>Bühne:</div>
        <div>Unterrichtszeit:</div>
      </div>
      <el-form label-width="40px">
        <el-form-item label="Video">
          <Eingabe
            ref="Videodatei"
            Typ="Datei"
          >
        </el-form-item>
        <el-form-item label="Umschlag">
          <Eingabe
            ref="Bilddatei"
            Typ="Datei"
          />
        </el-form-item>
        <el-form-item>
          <el-Schaltfläche
            Typ="primär"
            @klick="authUpload"
          >Hochladen starten</el-button>
          <el-button>Zurück</el-button>
        </el-form-item>
      </el-form>
    </el-Karte>
  </div>
</Vorlage>
<Skript>
/* eslint-deaktivieren */
Axios von „Axios“ importieren
importieren {
  aliyunImagUploadAddressAdnAuth,
  aliyunVideoUploadAddressAdnAuth,
  transCodeVideo,
  getAliyunTransCodePercent
} von '@/services/aliyun-oss'

Standard exportieren {
  Daten () {
    zurückkehren {
      Uploader: null,
      Video-ID: null,
      Bild-URL: '',
      Dateiname: ''
    }
  },
  erstellt () {
    dies.initUploader()
  },
  Methoden: {
    authUpload() {
      const videoFile = this.$refs['video-file'].files[0]
      this.uploader.addFile(videoFile, null, null, null, '{"Vod":{}}')
      dies.uploader.addFile(diese.$refs['Bilddatei'].files[0], null, null, null, '{"Vod":{}}')
      dieser.Dateiname = Videodateiname
      dies.uploader.startUpload()
    },
    initUploader () {
      dieser.uploader = neues Fenster.AliyunUpload.Vod({
        // Ali-Konto-ID, muss einen Wert haben, der Wert stammt von https://help.aliyun.com/knowledge_detail/37196.html
        Benutzer-ID: 1618139964448548,
        // Die Region zum Hochladen auf VOD, der Standardwert ist „cn-shanghai“, //eu-central-1, ap-southeast-1
        Region: 'cn-shanghai',
        // Die Standardfragmentgröße beträgt 1 MB und kann nicht kleiner als 100 KB sein.
        Teilegröße: 1048576,
        // Die Anzahl der parallel hochzuladenden Shards, der Standardwert ist 5
        parallel: 5,
        // Bei einem Netzwerkausfall ist die Upload-Zeit erneut, der Standardwert ist 3
        Anzahl der Wiederholungsversuche: 3,
        // Wenn das Netzwerk ausfällt, beträgt das erneute Upload-Intervall standardmäßig 2 Sekunden. retryDuration: 2,
        // Hochladen starten onUploadstarted: async uploadInfo => {
          console.log('beimUpload gestartet', Upload-Info)
          let uploadAuthInfo = null
          wenn (uploadInfo.isImage) {
            const { data } = warte auf aliyunImagUploadAddressAdnAuth()
            diese.Bild-URL = Daten.Daten.Bild-URL
            uploadAuthInfo = Daten.Daten
          } anders {
            const { data } = warte auf aliyunVideoUploadAddressAdnAuth({
              Dateiname: uploadInfo.file.name
            })
            diese.videoId = data.data.videoId
            uploadAuthInfo = Daten.Daten
          }
          
          // console.log('uploadAuthInfo', uploadAuthInfo)

          dieser.uploader.setUploadAuthAndAddress(
            Info hochladen,
            uploadAuthInfo.uploadAuth,
            uploadAuthInfo.uploadAddress,
            uploadAuthInfo.videoId || uploadAuthInfo.imageId
          )
        },
        // Dateiupload erfolgreich onUploadSucceed: function (uploadInfo) {
          console.log('beiUploadErfolgreich', Upload-Info)
        },
        // Dateiupload fehlgeschlagen onUploadFailed: function (uploadInfo, code, message) {
          console.log('beiUploadfehlgeschlagen')
        },
        // Fortschritt des Datei-Uploads, Einheit: Bytes onUploadProgress: Funktion (uploadInfo, totalSize, loadedPercent) {
        },
        // Timeout für Upload-Anmeldeinformationen onUploadTokenExpired: function (uploadInfo) {
          console.log('beiAbgelaufenemUploadToken')
        },
        // Der Upload aller Dateien ist abgeschlossen onUploadEnd: async uploadInfo => {
          console.log(UploadInfo)
          konsole.log({
            Lektions-ID: this.$route.query.lessonId,
            Datei-ID: diese.video-ID,
            coverImageUrl: diese.imageUrl,
            Dateiname: dieser.Dateiname
          })
          const { Daten } = warte auf transCodeVideo({
            Lektions-ID: this.$route.query.lessonId,
            Datei-ID: diese.video-ID,
            coverImageUrl: diese.imageUrl,
            Dateiname: dieser.Dateiname
          })
          console.log(Daten)

          setzeInterval(async () => {
             const { data } = warte auf getAliyunTransCodePercent(this.$route.query.lessonId)
             console.log('Transkodierungsfortschritt', Daten)
          }, 3000)
        }
      })
    }
  }
}
</Skript>

/**
 * In die Alibaba Cloud hochladen*/

Importieren Sie die Anforderung von „@/utils/request“.

exportiere const aliyunImagUploadAddressAdnAuth = () => {
  Rückgabeanforderung({
    Methode: 'GET',
    URL: „/boss/course/upload/aliyunImagUploadAddressAdnAuth.json“
  })
}

export const aliyunVideoUploadAddressAdnAuth = (params: any) => {
  Rückgabeanforderung({
    Methode: 'GET',
    URL: „/boss/course/upload/aliyunVideoUploadAddressAdnAuth.json“,
    Parameter
  })
}

export const transCodeVideo = (Daten: beliebig) => {
  Rückgabeanforderung({
    Methode: 'POST',
    URL: „/boss/course/upload/aliyunTransCode.json“,
    Daten
  })
}

export const getAliyunTransCodePercent = (lessonId: Zeichenfolge | Zahl) => {
  Rückgabeanforderung({
    Methode: 'GET',
    URL: „/boss/course/upload/aliyunTransCodePercent.json“,
    Parameter: {
      Unterrichts-ID
    }
  })
}