通过上传地址和凭证,使用上传SDK,实现视频的上传。
【具体参考见:】
https://helpcdn.aliyun.com/product/29932.html?spm=a2c4g.11186623.3.1.569b6bd1owri5S
- html页面
- JS
- .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);
}