vue+腾讯云上传各种资源（图片、视频、音频、文档、资源包）和tcplayer视频播放

(1)上传图片、音频、文档、资源包

基本步骤

(1) 介绍

import COS from "cos-js-sdk-v5";
 

（2）util文件夹下的index.js

export const getdate = () => {
    var myDate = new Date;
    var year = myDate.getFullYear(); //获取当前年
    var mon = myDate.getMonth() + 1; //获取当前月
    var date = myDate.getDate(); //获取当前日
    var sp='/';
    return year+sp+mon+sp+date+sp;
}
 

export const randomString = (len, charSet) => {
    charSet = charSet || 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    var randomString = '';
    for (var i = 0; i < len; i++) {
        var randomPoz = Math.floor(Math.random() * charSet.length);
        randomString += charSet.substring(randomPoz,randomPoz+1);
    }
    return randomString;
}
 

(3) 从接口

//从外部js文件中引入方法
import {  randomString, getdate,setCookieCos,getCookieCos  } from '@/util'
if(getCookieCos('teacheronlinecos')){
     this.cos = JSON.parse(getCookieCos('teacheronlinecos'));
}else{
     let res = await getCos();
     if(res){
           this.cos = res;
           setCookieCos(res,10);
      }
 }
 var that = this;
            this.cos_key = "teacheronline/" + getdate() + randomString( 32, "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ") +that.file_type;
            var cos = new COS({
                SecretId: that.cos.temp_keys.credentials.tmpSecretId,
                SecretKey: that.cos.temp_keys.credentials.tmpSecretKey,
                XCosSecurityToken: that.cos.temp_keys.credentials.sessionToken,
                StartTime: that.cos.temp_keys.startTime,
                ExpiredTime: that.cos.temp_keys.expiredTime,
            });
            cos.putObject(
                {
                    Bucket: that.cos.bucket /* 必须 */,
                    Region: that.cos.region /* 存储桶所在地域，必须字段 */,
                    Key: this.cos_key /* 必须 */,
                    StorageClass: "STANDARD",
                    Body: this.file, // 上传文件对象
                    onProgress: (progressData) => {
                        that.video_progress = parseInt(progressData.percent * 100)
                    },
                },
                (err, data) => {
                    if(err==null&&data.statusCode==200){
                        that.uploadForm.img_url = "https://" + data.Location;
                        that.is_show = false;
                        that.is_multiple = false
                    }
                    if (err) {
                        return console.log(err);
                    }
                }
            );
 

(2) 视频

基本步骤

(1) 介绍

import TcVod from "vod-js-sdk-v6";
 

（2）根据界面获取视频签名

getSignature() {
            return getVod().then((res) => {
                return res.signature;
            });
        },
 

（3）上传视频

uptoVod(){
            var that = this;
            that.video_loading = true;
            const tcVod = new TcVod({
                getSignature: that.getSignature, //上传签名的函数
            });
            var uploader = tcVod.upload({
                mediaFile: that.mediaFile, //媒体文件
                mediaName: that.type, //覆盖媒体文件元信息中的文件名
            });
            uploader.on("media_progress", function (info) {
                that.video_progress = parseInt(info.percent * 100)
            });
            uploader.done().then(function (doneResult) {
                that.uploadForm.video_url = doneResult.video.url;
                that.video_id = doneResult.fileId;
                that.is_upload = true;
                that.video_loading = false;
                that.tcpPlayer(doneResult.fileId,doneResult.video.url);

            }).catch(function (err) {
                console.log(err);
            });
        },
 

（4）视频上传后，需要一些时间进行解码。这时通过控制隐藏来添加视频标签

<video  controls="controls" :src="play_url" width="500"  height="300" preload="auto" playsinline webkit-playsinline>您的浏览器不支持 video 标签2。</video>
 

（5）加载主屏幕

<el-checkbox-group v-model="uploadForm.video_url" v-show="false"></el-checkbox-group>
<el-upload :class="is_multiple? '' : 'upload_btn_show'" v-show="!is_upload" :show-file-list="false" :disabled='is_upload' class="upload-demo" action="no" :on-success="handleVideoSuccess" :on-remove="handleVideoRemove" :before-upload="beforeUploadVideo" :on-progress="uploadVideoProcess" :http-request="uptoVod" accept=".mp4,.avi,.MP4,.MOV,.x-msvideo,.rmvb,.rm,.3gp">
      <div class="upload-video">
            <div class="el-upload__text"></div>
            <p>点击上传</p>
      </div>
      <div class="el-upload__tip" slot="tip">建议格式为mp4、AVI、mov、rmvb、rm、FLV、3GP等</div>
</el-upload>
 

（3）视频播放

基本步骤

(1) 引入（在index.html中）

<link href="https://codeqd.com/zb_users/upload/2023/09/tcplayer.css" rel="stylesheet">
<!--如果需要在 Chrome 和 Firefox 等现代浏览器中通过 H5 播放 HLS 格式的视频，需要在 tcplayer.v4.1.min.js 之前引入 hls.min.0.13.2m.js。-->
<script src="https://imgcache.qq.com/open/qcloud/video/tcplayer/libs/hls.min.0.13.2m.js"></script>
<!--播放器脚本文件-->
<script src="https://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.v4.1.min.js"></script>
 

（2）从接口获取video_url

tcpPlayer(file_id,file_url) {
     var that = this;
     getPlayer({ file_id: file_id, file_url:file_url}).then((res) => {
         that.play_url = res.url;
     }).catch((err) => {
          console.warn(err);
     });
 },