示例：
- 前端封裝方法並調用，直接上傳至阿里雲
此方法需要在阿里雲擁有賬號，並配置好纔可使用，配置就不貼出了，只貼出前端代碼。
/**
*
* 阿里雲 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