示例：
- 前端封装方法并调用，直接上传至阿里云
此方法需要在阿里云拥有账号，并配置好才可使用，配置就不贴出了，只贴出前端代码。
/**
*
* 阿里云 oss (图片、视频上传) 插件
*
* @param opts 参数详情
* opts = {
* timeout:"请求过期时间（配置项 timeout, 默认 60000）",
* partSize:"分片大小（配置项 partSize, 默认 1048576）",
* parallel:"上传分片数（配置项 parallel, 默认 5）",
* retryCount:"网络失败重试次数（配置项 retryCount, 默认 3）",
* retryDuration:"网络失败重试间隔（配置项 retryDuration, 默认 2）",
* region:"配置项 region, 默认 cn-shanghai",
* userId:"阿里云账号ID，默认1111",
* stsUrl:"获取stsToken的地址",
* videoInfoUrl:"获取视频信息的地址",
* cateId:“视频分类id”,
*
* addFileSuccess:"添加文件成功回调",
* onUploadstarted:"开始上传的回调",
* onUploadSucceed:"成功上传的回调",
* onUploadFailed:"上传失败的回调",
* onUploadCanceled:"取消上传的回调",
* onUploadProgress:"上传过程回调",
* onUploadEnd:""上传完成回调
* }
*/
jQuery.fn.extend({
aliyunUploader: function (opts,callback) {
var stsUrl = opts.stsUrl;
var videoInfoUrl = opts.videoInfoUrl;
if(!stsUrl){
stsUrl = 'https://xx.xxxx.com/upload/oss/createSecurityToken';
}
if(!videoInfoUrl){
videoInfoUrl = 'https://xx.xxxx.com/upload/oss/getVideoInfo';
}
const _this = this;
var dtd = $.Deferred();
var wait = function(dtd){
// 获取页面所有的script标签
var scripts = document.getElementsByTagName("script");
// 匹配当前js路径
var url;
for (var i = 0;i < scripts.length; i++){
url = scripts[i].src;
if(url.indexOf("aliyunUpload.js") != -1) break;
}
var path = url.replace('aliyunUpload.js','');
var urls = [
path + "lib/aliyun-upload-sdk/aliyun-upload-sdk-1.5.0.min.js",
path + "lib/aliyun-upload-sdk/lib/es6-promise.min.js",
path + "lib/aliyun-upload-sdk/lib/aliyun-oss-sdk-5.3.1.min.js"
];
var sta = 0;
// 加载js
var loadScript = function () {
$.getScript(urls[sta],function(data, textStatus, jqxhr){
sta += textStatus == 'success'?1:0;
if(sta == 3){
console.log("JS success!");
dtd.resolve();
}else {
loadScript();
}
});
};
loadScript();
return dtd;
};
$.when(wait(dtd)).done(function(){
var uploader = new AliyunUpload.Vod({
timeout: opts.timeout || 60000,
partSize: opts.partSize || 1048576,
parallel: opts.parallel || 5,
retryCount: opts.retryCount || 3,
retryDuration: opts.retryDuration || 2,
region: opts.region || 'cn-shanghai',
userId: opts.userId || '1111',
// 添加文件成功
addFileSuccess: function (uploadInfo) {
console.log('添加文件成功...');
if(opts.addFileSuccess) opts.addFileSuccess(uploadInfo);
},
// 开始上传
onUploadstarted: function (uploadInfo) {
// 如果是 STSToken 上传方式, 需要调用 uploader.setUploadAuthAndAddress 方法
// 用户需要自己获取 accessKeyId, accessKeySecret,secretToken
// 下面的 URL 只是测试接口, 用于获取 测试的 accessKeyId, accessKeySecret,secretToken
$.get(stsUrl, function (data) {
var accessKeyId = data.accessKeyId;
var accessKeySecret = data.accessKeySecret;
var secretToken = data.securityToken;
uploader.setSTSToken(uploadInfo, accessKeyId, accessKeySecret, secretToken)
}, 'json');
console.log('文件开始上传...');
console.log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" +
uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object);
if(opts.onUploadstarted) opts.onUploadstarted(uploadInfo)
},
// 文件上传成功
onUploadSucceed: function (uploadInfo) {
console.log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint +
", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object);
console.log('文件上传成功!');
// 获取视频信息
$.get(videoInfoUrl,{
vid:uploadInfo.videoId,
fileHashCode: uploadInfo.fileHash
}, function (data) {
if(opts.onUploadSucceed) opts.onUploadSucceed(data)
}, 'json');
},
// 文件上传失败
onUploadFailed: function (uploadInfo, code, message) {
console.log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message);
console.log('文件上传失败!');
if(opts.onUploadFailed) opts.onUploadFailed(uploadInfo, code, message)
},
// 取消文件上传
onUploadCanceled: function (uploadInfo, code, message) {
console.log("Canceled file: " + uploadInfo.file.name + ", code: " + code + ", message:" + message);
console.log('文件已取消上传!');
if(opts.onUploadCanceled) opts.onUploadCanceled(uploadInfo, code, message)
},
// 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
onUploadProgress: function (uploadInfo, totalSize, progress) {
console.log("onUploadProgress:file:" + uploadInfo.file.name +
", fileSize:" + totalSize + ", percent:" + Math.ceil(progress * 100) + "%");
if(opts.onUploadProgress) opts.onUploadProgress(uploadInfo, totalSize, progress)
},
// 上传凭证超时
onUploadTokenExpired: function (uploadInfo) {
// 如果是上传方式二即根据 STSToken 实现时，从新获取STS临时账号用于恢复上传
// 上传文件过大时可能在上传过程中 sts token 就会失效, 所以需要在 token 过期的回调中调用 resumeUploadWithSTSToken 方法
// 这里是测试接口, 所以我直接获取了 STSToken
console.log('文件上传超时!');
$.get(stsUrl, function (data) {
var accessKeyId = data.accessKeyId;
var accessKeySecret = data.accessKeySecret;
var secretToken = data.securityToken;
uploader.setSTSToken(uploadInfo, accessKeyId, accessKeySecret, secretToken)
}, 'json')
},
// 全部文件上传结束
onUploadEnd: function (uploadInfo) {
console.log("onUploadEnd: uploaded all the files");
if(opts.onUploadEnd) opts.onUploadEnd(uploadInfo)
}
});
/** 绑定事件 */
$(_this).on('change', function (e) {
console.log(e.target.files)
var file = e.target.files[0];
if (!file) {
alert("请先选择需要上传的文件!");
return
}
// 用户信息设置
var userData = {
Vod:{
Title: file.name,
FileName: file.name,
CateId: opts.cateId || "1111111"
}
};
uploader.cleanList();// 清理掉，不然会上传之前添加的文件
// 首先调用 uploader.addFile(event.target.files[i], null, null, null, userData)
uploader.addFile(file, null, null, null, JSON.stringify(userData))
});
callback(uploader)
}).fail(function(){
console.log("上传器创建失败！");
});
}
});
//调用
$(obj).aliyunUploader({// 具体参数设置看注释
cateId: "11111111",
onUploadSucceed: function (data) {// 成功回调
console.log("result："+ data);
},
addFileSuccess: function (data) {// 添加文件成功回调
console.log("result："+ data);
//在此触发开始上传事件，例如：
$(obj2).click(function() {
uploader.startUpload();// 开始上传
})
},
onUploadFailed: function(){//上传视频回调
alert('视频上传失败！');
}
},function (data) {
uploader = data;
});
- 封装公共方法实例化上传对象
;(function($){
$.fn.extend({
/**
* 视频上传
* @param {int} water 是否水印，默认false不加水印 预留，暂无效
* @returns {uploadVideo}
*/
uploadVideo: function(water) {
var water = water || false;
var uploadObject = this;
/*this.userData = '{"Vod":{"UserData":"{"IsShowWaterMark":'+water+',"Priority":"7"}"}}';*/
this.authData = {
UploadAddress: "",
VideoId: "",
RequestId: "",
UploadAuth: "",
};
//各种状态的回调
this._progressCallBack = null;
this._uploadedCallBack = null;
this._errorCallBack = null;
this._uploadBeforeCallBack = null;
/**
* 设置图片上传成功后的回调方法
* @param {function} fn 回调方法
* @returns {upload_files}
* @private
*/
this.setUploaded = function (fn) {
this._uploadedCallBack = fn;
return this;
};
/**
* 设置进度回调
* @param fn
* @returns {upload}
*/
this.setProgress = function (fn) {
this._progressCallBack = fn;
return this;
};
/**
* 设置开始上传前的回调方法
* @param {function} fn 回调方法
* @returns {upload_files}
* @private
*/
this.setUploadBefore = function (fn) {
this._uploadBeforeCallBack = fn;
return this;
};
/**
* 上传失败后的回调方法
* @param {function} fn 回调方法
* @returns {upload_files}
*/
this.setError = function (fn) {
this._errorCallBack = fn;
return this;
};
this.run = function () {
uploadObject[0].addEventListener ? uploadObject[0].addEventListener("change", this._bindSelectFileEvent, false) : uploadObject[0].attachEvent('onChange', this._bindSelectFileEvent);
};
this._bindSelectFileEvent = function (event) {
if( event.target.files.length > 1 ){
alert('只支单视频上传');
return false;
}
var file = event.target.files[0];
if(file.filename == '' || file.filesize == '') {
alert('视频上传错误');
return false;
}
if( file.type.indexOf('video') == -1) {
alert('请上传视频格式文件');
return false;
}
$.getJSON(siteroot + '/share/ajax.html?action=getVideoPlayAuth&inajax=1',{filename:file.name,filesize:file.size}, function (resp) {
console.log(resp);
if(resp.s<0) {
alert(resp.message);
return false;
}
uploadObject.authData = resp.data;
console.log(resp.data);
var uploader = new AliyunUpload.Vod({
//分片大小默认1M，不能小于100K
partSize: 1048576,
//并行上传分片个数，默认5
parallel: 5,
//网络原因失败时，重新上传次数，默认为3
retryCount: 3,
//网络原因失败时，重新上传间隔时间，默认为2秒
retryDuration: 2,
userId : '',
// 开始上传
'onUploadstarted': function (uploadInfo) {
console.log("onUploadStarted:" + uploadInfo.file.name)
uploader.setUploadAuthAndAddress(uploadInfo, uploadObject.authData.UploadAuth, uploadObject.authData.UploadAddress,uploadObject.authData.VideoId);
},
// 文件上传成功
'onUploadSucceed': function (uploadInfo) {
if( $.isFunction(uploadObject._uploadedCallBack) ){
uploadInfo.VideoId = uploadObject.authData.VideoId;
uploadObject._uploadedCallBack(uploadInfo);
}
},
// 文件上传失败
'onUploadFailed': function (uploadInfo, code, message) {
if( $.isFunction(uploadObject._errorCallBack) ){
uploadObject._errorCallBack(uploadInfo, code, message);
}
},
// 文件上传进度，单位：字节
'onUploadProgress': function (uploadInfo, totalSize, uploadedSize) {
if( $.isFunction(uploadObject._progressCallBack) ){
uploadObject._progressCallBack(uploadInfo, totalSize, uploadedSize);
}
},
// 上传凭证超时
'onUploadTokenExpired': function () {
uploader.resumeUploadWithAuth(uploadObject.authData.UploadAuth);
}
});
var userData = {
Vod: {
UserData: {
IsShowWaterMark: false,
Priority: 7
}
}
};
uploader.addFile(file, null, null, null, JSON.stringify(userData));
/*uploader.addFile(file, null, null, null, uploadObject.userData);*/
//开始上传之前执行某个操作
if( $.isFunction(uploadObject._uploadBeforeCallBack) ){
uploadObject._uploadBeforeCallBack();
}
uploader.startUpload();
});
return this;
};
return this;
}
});
})(jQuery);
注：第一种方式是小编正在使用的，第二种是网上查找到的，未进行验证。
官网地址：https://help.aliyun.com/document_detail/112718.html?spm=a2c4g.11186623.6.1431.270e7eaepYPAC4
