由于第一次使用，上一篇文章使用的基本是截图，经研究这块改为代码块，方便复制。
<el-form-item label="暖场视频">
<el-button size="small" type="primary" id="UploadVideo">选取视频</el-button>
<el-tooltip class="item" effect="dark" content="只能上传mp4文件，且大小不超过100M" placement="right">
<span><i class="el-icon-question"></i></span>
</el-tooltip>
<el-progress v-show="progress>0"
:text-inside="true"
:stroke-width="20"
:percentage="progress"></el-progress>
<div v-show="form.AdsUrl!=''" style="margin-top:10px">
<el-input v-model="form.AdsUrl" :disabled="true"></el-input>
<a href="javascript:void(0)" style="top: calc(100% - 48px);right: -5px!important;" class="el-upload-list__item-delete el-icon-close" @@click="handleRemove_ads"></a>
</div>
</el-form-item>
<script>
new Vue({
el: "#",
data: {
uploaderModel: {},
para: {
accessid: '',
host: '',
policyBase64: '',
signature: '',
callbackbody: '',
expire: 0,
g_object_name: '',
ossvf: ""
},
progress: 0
},
methods:{
//获取后缀
get_suffix: function (filename) {
var pos = filename.lastIndexOf('.');
var suffix = '';
if (pos != -1) {
suffix = filename.substring(pos)
}
return suffix;
},
//获取GUID，作为上传到OSS的文件名称，同名称的文件上传会被覆盖
getGUID: function () {
var d = new Date().getTime();
var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = (d + Math.random() * 16) % 16 | 0;
d = Math.floor(d / 16);
return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
});
return uuid;
},
//获取签名
get_signature: function () {
var that = this;
$.ajax({
url: "@Url.Action("getSignature", "OSS")",
cache: false,
async: false,
success: function (res) {
var obj = res.data;
that.para.host = obj.host;
that.para.policyBase64 = obj.policy;
that.para.accessid = obj.accessid;
that.para.signature = obj.signature;
that.para.expire = parseInt(obj.expire);
that.para.callbackbody = obj.callback;
that.para.ossvf = obj.ossvf;
return true;
},
error: function (res) {
console.log(res);
return true;
}
});
},
//计算上传文件的名称
calculate_object_name: function (filename) {
// 拼接上传文件路径，ossvf 是Bucket下文件的名称，没有可忽略
this.para.g_object_name = this.para.ossvf + "/"+this.getGUID() + this.get_suffix(filename);
},
//设置OSS上传参数
set_upload_param: function (filename, size, ret) {
if (ret == false) {
//获取签名
ret = this.get_signature();
if (ret == false) {
this.uploaderModel.splice(0, 1);
return false;
}
}
if (filename != '') {
this.calculate_object_name(filename);
}
//设置配置的参数
this.uploaderModel.setOption({
'url': this.para.host,
'multipart_params': {
'key': this.para.g_object_name,
'policy': this.para.policyBase64,
'OSSAccessKeyId': this.para.accessid,
'success_action_status': '200',
//'callback': this.callbackbody,
'signature': this.para.signature,
}
});
//开始上传
this.uploaderModel.start();
},
InitUpload: function () {
var that = this;
this.uploaderModel = new plupload.Uploader({
container: "hiddendiv", //用来指定Plupload所创建的html结构的父容器，默认为前面指定的browse_button的父元素。该参数的值可以是一个元素的id,也可以是DOM元素本身
//触发文件选择对话框的DOM元素，当点击该元素后便后弹出文件选择对话框。该值可以是DOM元素对象本身，也可以是该DOM元素的id
browse_button: 'UploadVideo',
multi_selection: false,//是否允许多选
flash_swf_url: 'Content/plupload-2.1.2/Moxie.swf',
silverlight_xap_url: 'Content/plupload-2.1.2/Moxie.xap',
url: 'http://oss-cn-beijing.aliyuncs.com',
filters: {
mime_types: [
{ title: "Video files", extensions: "mp4" },
],
max_file_size: '500mb',
//prevent_duplicates: false
},
init: {
//添加上传文件时触发
FilesAdded: function (uploader, files) {
if (files.length > 0) {
var file = files[0];
that.set_upload_param(file.name, file.size, false);
}
},
//当队列中的某一个文件正要开始上传前触发
BeforeUpload: function (uploader, file) {
},
//会在文件上传过程中不断触发，可以用此事件来显示上传进度
UploadProgress: function (uploader, file) {
that.progress = file.percent;
console.log(file.name);
},
//某一个文件上传完毕触发
FileUploaded: function (uploader, file, info) {
console.log(file);
},
//队列中所有文件上传完触发
UploadComplete: function (uploader, files) {
that.form.AdsUrl = that.para.host + "/" + that.para.g_object_name;
},
//当发生错误时触发
Error: function (uploader, err) {
if (err.code == -600) { //文件大小错误
alert("上传文件需小于500M");
}
else if (err.code == -601) { //文件类型错误
alert("请上传 mp4 格式的视频");
}
else if (err.code == -602) { //重复上传错误
}
console.log(err);
}
}
});
this.uploaderModel.init();
}
}
</script>
后台获取签名代码
/// <summary>
/// 获取签名
/// </summary>
/// <returns></returns>
public ActionResult getSignature(string callbackUrl = "")
{
var client = new OssClient(endpoint, accessKeyId, accessKeySecret);
DateTime now = DateTime.Now;
DateTime expireTime = now.AddSeconds(30);//过期时间设置30秒
PolicyConditions policyConds = new PolicyConditions();
policyConds.AddConditionItem(PolicyConditions.CondContentLengthRange, 0, 524288000); //最大500M
policyConds.AddConditionItem(MatchMode.StartWith, PolicyConditions.CondKey, "");
string postPolicy = client.GeneratePostPolicy(expireTime, policyConds);
byte[] binaryData = Encoding.Default.GetBytes(postPolicy);
string encodedPolicy = Convert.ToBase64String(binaryData);
var hmac = new HMACSHA1(Encoding.UTF8.GetBytes(accessKeySecret));
var hashBytes = hmac.ComputeHash(Encoding.UTF8.GetBytes(encodedPolicy));
var Signature = Convert.ToBase64String(hashBytes);
var callbackBase64 = "";
if (string.IsNullOrEmpty(callbackUrl) == false)
{
var callback = new
{
callbackUrl,
callbackBody = "filename=${object}&size=${size}&mimeType=${mimeType}&etag=${etag}",
callbackBodyType = "application/x-www-form-urlencoded"
};
byte[] callbackByte = Encoding.Default.GetBytes(JsonConvert.SerializeObject(callback));
callbackBase64 = Convert.ToBase64String(callbackByte);
}
var host = $"https://{bucketName}.{endpoint}";
var result = new Signature()
{
accessid = accessKeyId,
policy = encodedPolicy,
signature = Signature,
dir = "",
host = host,
expire = ConvertDateTimeInt(expireTime).ToString(),
callback = callbackBase64,
ossvf = ossVideoFolder
};
return Json(new { success = true, data = result }, JsonRequestBehavior.AllowGet);
}
private int ConvertDateTimeInt(DateTime time)
{
System.DateTime startTime = new DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.Utc);
return (int)(time - startTime).TotalSeconds;
}
