视频点播——JS测试阿里云视频上传功能

通过上传地址和凭证，使用上传SDK，实现视频的上传。

【具体参考见:】
https://helpcdn.aliyun.com/product/29932.html?spm=a2c4g.11186623.3.1.569b6bd1owri5S 
 

1. html页面
2. JS
3. .ashx处理页面

HTML 页面

首先从链接中下载JavaScript上传SDK

（https://helpcdn.aliyun.com/document_detail/51992.html?spm=a2c4g.11186623.6.814.7935794eFZLrrI）

    <script src="js/es6-promise.min.js"></script>
    <script src="js/aliyun-upload-sdk-1.4.0.min.js"></script>
    <script src="js/aliyun-oss-sdk-5.2.0.min.js"></script>

    <input type="file" name="file" id="files" multiple/>
    <button type="button" onclick="start()">开始上传</button>

JS 

通过js调用api接口

var uploader = new AliyunUpload.Vod({
    //分片大小默认1M，不能小于100K
    partSize: 1048576,
    //并行上传分片个数，默认5
    parallel: 5,
    //网络原因失败时，重新上传次数，默认为3
    retryCount: 3,
    //网络原因失败时，重新上传间隔时间，默认为2秒
    retryDuration: 2,
    // 开始上传
    'onUploadstarted': function (uploadInfo) {
        console.log("onUploadstarted:" + uploadInfo.file.name + ",endpoint" + uploadInfo.endpoint + ",bucket:" + uploadInfo.bucket + ",object:" + uploadInfo.object + ",uploadInfo.videoId:" + uploadInfo.videoId);
        if (uploadInfo.videoId!=undefined) {
            // 调用刷新视频上传凭证接口
            var videoId = uploadInfo.videoId;
            $.ajax({
                type: "post",
                url: "/Handler/RefreshUploadVideo.ashx",
                dataType: "TEXT",
                data: {
                    "videoId": videoId
                },
                success: function (data) {
                    //把json字符串转化为json对象
                    var obj = JSON.parse(data);
                    var uploadAuth = obj.UploadAuth;
                    var uploadAddress = obj.UploadAddress;
                    uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId);
                },
                error: function () {
                    alter("error:" + data.d);
                }
            });
        } else {
            //调用创建视频上传凭证接口
            var title = uploadInfo.file.name;
            $.ajax({
                type: "post",
                url: "/Handler/CreateUploadVideo.ashx",
                dataType: "TEXT",
                data: {
                    "Title":title //传入的参数
                },
                success: function (data) {
                    //把json字符串转化为json对象
                    var obj = JSON.parse(data);
                    console.log(obj.VideoId);
                    var uploadAuth = obj.UploadAuth;
                    var uploadAddress = obj.UploadAddress;
                    var videoId = obj.VideoId;
                    调用api文件上传
                    uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId);
                },
                error: function () {
                    alert("获取上传凭证过程发生错误！");
                }
            });
        }
    },
    // 文件上传成功
    'onUploadSucceed': function (uploadInfo) {
        console.log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object);
        //alter("文件上传成功！");
    },
    // 文件上传失败
    'onUploadFailed': function (uploadInfo, code, message) {
        console.log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message);
        //alter("文件上传失败！");
    },
    // 文件上传进度，单位：字节
    'onUploadProgress': function (uploadInfo, totalSize, loadedPercent) {
        console.log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" + totalSize + ", percent:" + Math.ceil(loadedPercent * 100) + "%");
    },
    //上传凭证超时
    'onUploadTokenExpired': function (uploadInfo) {
        console.log("onUploadTokenExpired");
        // 调用刷新视频上传凭证接口
        var videoId = uploadInfo.videoId;
        $.ajax({
            type: "post",
            url: "/Handler/RefreshUploadVideo.ashx",
            dataType: "TEXT",
            data: {
                "videoId": videoId
            },
            success: function (data) {
                //把json字符串转化为json对象
                var obj = JSON.parse(data);
                var uploadAuth = obj.UploadAuth;
                var uploadAddress = obj.UploadAddress;
                uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId);
            },
            error: function () {
                alter("error:" + data.d);
            }
        });
    },
    //全部文件上传结束
    'onUploadEnd': function (uploadInfo) {
        console.log("onUploadEnd: uploaded all the files");
    }
});

//开始上传
function start() {
    console.log("start upload.");
    uploader.startUpload();
}

var selectFile = function (event) {
    //上传时，可以选择是否启用水印和优先级
    var userData = '{"Vod":{"StorageLocation":"","UserData":{"IsShowWaterMark":"false","Priority":"7"}}}';
    for (var i = 0; i < event.target.files.length; i++) {
        //获取到用户选择的文件后，添加到上传列表中
        console.log("add file:" + event.target.files[i].name);
        uploader.addFile(event.target.files[i], null, null, null, userData);
    }
};


}

.ashx处理页 

获取上传地址和凭证（刷新上传地址和凭证同理）

// CreateUploadVideo


 public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            try
            {               
                // 构造请求
                CreateUploadVideoRequest request = new CreateUploadVideoRequest();
                request.FileName = context.Request["Title"];
                request.Title = context.Request["Title"];
                // 初始化客户端
                DefaultAcsClient client = InitVodClient();
                //发起请求，并得到响应结果
                CreateUploadVideoResponse response = client.GetAcsResponse(request);
                //生成json字符串
                JObject obj=new JObject();
                obj["RequestId"]=response.RequestId;
                obj["UploadAddress"]=response.UploadAddress;
                obj["UploadAuth"]=response.UploadAuth;
                obj["VideoId"] = response.VideoId;
                string json = obj.ToString();
                context.Response.Write(json);
                context.Response.End();
            }
            catch (ServerException ex)
            {
                Console.WriteLine(ex.ToString());
            }
            catch (ClientException ex)
            {
                Console.WriteLine(ex.ToString());
            }
        }
        public static DefaultAcsClient InitVodClient()
        {
            String accessKeyId = "";//用于标识用户
            String accessKeySecret = "";//用户用于加密签名字符串和VOD用来验证签名字符串的密钥
            // 构建一个 Client，用于发起请求
            string regionId = "cn-shanghai"; //目前仅支持cn-shanghai
            IClientProfile profile = DefaultProfile.GetProfile(regionId, accessKeyId, accessKeySecret);
            return new DefaultAcsClient(profile);
        }