ElementUi +VUE 上传视频到腾讯云点播

1、后台生成签名代码

<dependency>
	    <groupId>com.qcloud</groupId>
	    <artifactId>vod_api</artifactId>
	    <version>2.1.1</version>
	</dependency>

public Result<String> getSign() {
        //得到Sign
        Signature sign = new Signature();
        sign.setSecretId(SecretId);
        sign.setSecretKey(SecretKey);
        sign.setCurrentTime(System.currentTimeMillis() / 1000);
        sign.setRandom(new Random().nextInt(java.lang.Integer.MAX_VALUE));
        sign.setSignValidDuration(3600 * 24 * 2);
        
        String signature = null;    
        try {
            signature = sign.getUploadSignature();
            logger.info("Find Doctor signature : " + signature);
        } catch (Exception e) {
            logger.info("FindDoctor获取签名失败");
            e.printStackTrace();
        }
        
        return this.success(signature);
    }

package com.zylc.cloud.framework.util;

import javax.crypto.Mac;
import javax.crypto.spec.SecretKeySpec;
import sun.misc.BASE64Encoder;

@SuppressWarnings("restriction")
public class Signature {
    private String secretId;
    private String secretKey;
    private long currentTime;
    private int random;
    private int signValidDuration;

    private static final String HMAC_ALGORITHM = "HmacSHA1";
    private static final String CONTENT_CHARSET = "UTF-8";

    public static byte[] byteMerger(byte[] byte1, byte[] byte2) {
        byte[] byte3 = new byte[byte1.length + byte2.length];
        System.arraycopy(byte1, 0, byte3, 0, byte1.length);
        System.arraycopy(byte2, 0, byte3, byte1.length, byte2.length);
        return byte3;
    }

    public String getUploadSignature() throws Exception {
        String strSign = "";
        String contextStr = "";

        long endTime = (currentTime + signValidDuration);
        contextStr += "secretId=" + java.net.URLEncoder.encode(secretId, "utf8");
        contextStr += "&currentTimeStamp=" + currentTime;
        contextStr += "&expireTime=" + endTime;
        contextStr += "&random=" + random;

        try {
            Mac mac = Mac.getInstance(HMAC_ALGORITHM);
            SecretKeySpec secretKey = new SecretKeySpec(this.secretKey.getBytes(CONTENT_CHARSET), mac.getAlgorithm());
            mac.init(secretKey);

            byte[] hash = mac.doFinal(contextStr.getBytes(CONTENT_CHARSET));
            byte[] sigBuf = byteMerger(hash, contextStr.getBytes("utf8"));
            strSign = new String(new BASE64Encoder().encode(sigBuf).getBytes());
            strSign = strSign.replace(" ", "").replace("\n", "").replace("\r", "");
        } catch (Exception e) {
            throw e;
        }
        return strSign;
    }

    public void setSecretId(String secretId) {
        this.secretId = secretId;
    }

    public void setSecretKey(String secretKey) {
        this.secretKey = secretKey;
    }

    public void setCurrentTime(long currentTime) {
        this.currentTime = currentTime;
    }

    public void setRandom(int random) {
        this.random = random;
    }

    public void setSignValidDuration(int signValidDuration) {
        this.signValidDuration = signValidDuration;
    }
}

２、elment-ui代码　el-upload　标签使用"http-request"覆盖默认的上传行为

     <el-upload class="upload-demo"
            :limit="1"
            :http-request="uploadVideo"
    	    :file-list="fileList3">
    			  <el-button size="small" type="primary">点击上传</el-button>
    			  <div slot="tip" class="el-upload__tip">只能上传AVI、WMV、RM、RMVB、MP4等格式  文件</div>
    			</el-upload>

３、引入SDK

先打开ＣＭＤ命令行运行　npm install vod-js-sdk-v6 　

然后页面引入

import TcVod from 'vod-js-sdk-v6'

uploadVideo (event){
        //获取file文件　，在后面上传时使用
        this.mediaFile = event.file
        this.attachVideo.size = event.file.size
}

４、定义获取上传签名的函数

function getSignature() { 
　　　　return axios.post(url).then(function (response) { 
　　　　　　　　return response.data.signature; 
　　　　}) 
};

５、页面ＪＳ代码

const tcVod = new TcVod({
          getSignature: getSignaturef,
        })
        const uploader = tcVod.upload({
          mediaFile: this.mediaFile,
          coverFile: this.coverFile,
        })

　　　　　// 视频上传完成时
        uploader.on('media_upload', function(info) {
          console.log('视频上传完成')
          uploaderInfo.isVideoUploadSuccess = true;
          if(uploaderInfo.isCoverUploadSuccess){
            _this.buttonName = '处理中'
          }
        })
        // 视频上传进度
        uploader.on('media_progress', function(info) {
          _this.percentageVideo = (info.percent*100).toFixed(0)
          console.log('视频上传中',_this.percentageVideo)
          uploaderInfo.progress = info.percent;
        })
        // 封面上传完成时
        uploader.on('cover_upload', function(info) {
          console.log('封面上传完成')
          uploaderInfo.isCoverUploadSuccess = true;
          if(uploaderInfo.isVideoUploadSuccess){
            _this.buttonName = '处理中'
          }
        })
        // 封面上传进度
        uploader.on('cover_progress', function(info) {
          _this.percentageImage = (info.percent*100).toFixed(0)
          console.log('封面上传中',_this.percentageImage)
          uploaderInfo.coverProgress = info.percent;
        })

        var uploaderInfo = {
          videoInfo: uploader.videoInfo,
          coverInfo: uploader.coverInfo,
          isVideoUploadSuccess: false,
          isVideoUploadCancel: false,
          isCoverUploadSuccess: false,
          progress: 0,
          coverProgress: 0,
          fileId: "",
          videoUrl: "",
          coverUrl: "",
          cancel: function() {
            uploaderInfo.isVideoUploadCancel = true;
            uploader.cancel();
          }
        }
        this.uploaderInfo = uploaderInfo
        uploader.done().then(function (doneResult) {
          uploaderInfo.fileId = doneResult.fileId;
          var vurl = doneResult.video.url
          var vurls = vurl.split('/')
          var _vurls = vurl.split('.')
          _this.attachVideo.filename = vurls[vurls.length-1]
          _this.attachVideo.filepath = doneResult.video.url
          _this.attachVideo.mime = _vurls[_vurls.length-1]
          if(doneResult.cover){
            _this.attachVideo.thumbnail = doneResult.cover.url
          }
          console.log(_this.attachVideo)
          insertVideo(_this.attachVideo).then(e=>{ 
            if(e.data){
              _this.attachVideo={
                targetId : '',
                type : 2,
                name : '',
                filename : '',
                filepath : '',
                mime : '',
                size : 0,
                thumbnail : '',
                ownerId : '',
                secured : 0,
                scope : 1,
                locked : 0,
                deleted : 0
              }
              _this.fileList3 = []
              _this.fileList4 = []
              _this.loadingUpload = false
              _this.progress = false
              _this.percentageVideo = 0
              _this.percentageImage = 0
              _this.buttonName = '确定上传'
              _this.uploaderInfo = {}
              _this.attachVideo.targetId = ''
              _this.state4 = ''
              _this.$emit('currentValue',false)
            }
          })
        })

 

转载于:https://my.oschina.net/u/2560963/blog/3081170