removeLoaded(index){
console.log('------------>>>deleteloaded',index);
this.currentUpload.list.splice(index,1);
this.uploadingVideos.splice(index,1);
let finput = this.$refs.videoInput;
finput.value = '';
},
removeLoading(index){
console.log('----------deleteloading',index);
this.uploadedUtil.deleteLoading(index);
},
pickVideo(){
let finput = this.$refs.videoInput;
finput.value == "";
finput.onchange = this.finputChange;
},
finputChange(){
let finput = this.$refs.videoInput;
if (finput.value.match(/\.(MP4|mp4)(\?.*)?$/)) {
let len = finput.files.length;
for (let i = 0; i < len; i++)
{
let f = finput.files[i];
console.log('===========>obj=',this.currentUploadObj)
if (this.currentUploadObj.hasOwnProperty(f.name))
{
util.arrayAdd(this.currentUpload.list,this.currentUploadObj[f.name],'showName')
// this.currentUpload.list.push(this.currentUploadObj[f.name]);
continue;
}
this.uploadingVideoFiles.push(f);
this.uploadingVideos.push({name:f.name,bytesLoaded: '-', bytesTotal: '-', bytesSpeed: '-', remainTime: '-', percentLoaded: 0, complete: false})
}
if (!this.uploadedUtil) {
this.uploadedUtil = new uploadUtilBatch(
this.uploadingVideoFiles, // 需要上传的文件列表
baseURL + 'tk', // 获取token的url
baseURL + "zonekeyresource/uploadVedio", // 下载文件的url
{areaid:this.currentUpload.areaid}, // post需要传的参数
// 上传进度
(progressInfo) => {
console.log('----progress=>', progressInfo)
let video = this.uploadingVideos[progressInfo.videoIndex];
if (!video)
return;
video.bytesLoaded = Math.round(progressInfo.bytesLoaded/1048576);
video.bytesTotal = Math.round(progressInfo.bytesTotal/1048576);
video.bytesSpeed = Math.round(progressInfo.bytesSpeed/1048576);
video.remainTime = Math.max(0,progressInfo.remainTime);
video.percentLoaded = progressInfo.percentLoaded;
},
// 文件上传完成回调
(index,info) => {
let video = this.uploadingVideos[index];
video['complete'] = true;
let fileBean = info.fileBean;
let infoObj = {name:fileBean.name,size:fileBean.size,resourcePath:fileBean.fileurl,showName:info.showName};
this.currentUploadObj[info.showName] = infoObj;
this.currentUpload.list.push(infoObj);
this.currentUpload.floder = info.floder;
console.log('----complete=>', index);
},(index) =>{
finput.value = '';
this.uploadingVideos.splice(index,1);
finput.value == "";
});
this.uploadedUtil.start();
}else
this.uploadedUtil.resumeUpload();
} else {
new FailHint().show('请选择正确的视频格式文件！');
}
},
valiadateUpload(name){
this.$refs[name].validate((valid) => {
if (valid) {
this.uploadFile();
}
})
},
uploadFile(){
videoServer.saveZonekeyResource(this.currentUpload).then(res=>{
if (res.id=='0')
{
new SuccessHint().show("已保存！");
this.cancelUpload();
this.selectItem = this.treeList[0];
this.firstNodeId = this.selectItem.id;
this.selectItem['open'] = true;
this.getVideoList();
}
else
new FailHint().show("保存失败！");
});
// this.uploadingVideoFiles = [];
// this.uploadingVideos = [];
},
// 取消上传
cancelUpload(){
this.currentUploadObj = {};
this.uploadingVideoFiles = [];
this.uploadingVideos = [];
this.uploadWinFlag = false;
this.uploadedUtil = null;
this.currentUpload = {areaid:'',userid:'',resourcename:'',list:[]};
},
util:
/**
* Created by ZHX on 2017/6/12.
*/
import * as util from './Util'
function UploadUtilBatch(files, tokenUrl, postUrl, params, progressFun, endFun, delBack) {
this.tokenUrl = tokenUrl;
this.postUrl = postUrl;
this.initPostUrl = postUrl;
this.params = params;
this.files = files;
this.progressFun = progressFun;
this.endFun = endFun;
this.delBack = delBack;
}
UploadUtilBatch.prototype = {
tokenUrl: "",
initPostUrl:'',
postUrl: "",
files: [],
progressFun: "",
endFun: "",
// 块大小 10M.
filePiece: 10485760,
// 正在下载的文件
currentFile: null,
// 正在下载的文件索引
cfIndex: 0,
xhrHandler: "",
XHR: "",
params: {},
// 记录每次开始位置
bytesStart: 0,
floder: '',
FileBean: null,
// 下载中
loading: false,
start(){
this.floder = '';
if (util.isArray(this.files) && this.files.length > 0) {
this.upload(this.files[this.cfIndex]);
}
else
new Error("穿入文件列表为空！");
},
upload (f) {
this.loading = true;
this.currentFile = f;
this.FileBean = null;
console.log('===========currentFile', f);
/** request the server to figure out what's the token for the file: */
let xhr = new XMLHttpRequest;
let vars = {
name: this.currentFile['name'],
size: this.currentFile['size'],
};
let tokenUrl = fAddVars(vars, this.tokenUrl) + "&" + util.fGetRandom();
xhr.open("GET", tokenUrl, !0);
xhr.onreadystatechange = () => {
if (xhr.readyState != 4 || xhr.status < 200)
return false;
try {
let token = JSON.parse(xhr.responseText).token;
this.initFile({token, size: this.currentFile.size, name: this.currentFile.name})
} catch (e) {
console.log(e);
}
}
xhr.send();
},
initFile(params){
let xhr = new XMLHttpRequest;
let initUrl = fAddVars(params, this.initPostUrl) + "&" + util.fGetRandom();
xhr.open("GET", initUrl, !0);
xhr.onreadystatechange = () => {
if (xhr.readyState != 4 || xhr.status < 200)
return false;
try {
let res = JSON.parse(xhr.responseText);
this.postUrl = fAddVars(
fMergeJson(params, this.params),
this.initPostUrl);
this.uploadFile(res.hasOwnProperty('start')?Number(res.start):0);
} catch (e) {
console.log(e);
}
}
xhr.send();
},
uploadFile(pos){
this.XHR = new XMLHttpRequest;
this.bytesStart = pos;
let _xhr = this.XHR, upload = _xhr.upload;
this.xhrHandler = fExtend(this.loadHandler, this);
upload.addEventListener("progress", this.xhrHandler, !1);
_xhr.addEventListener("load", this.xhrHandler, !1);
_xhr.addEventListener("loadend", this.xhrHandler, !1);
_xhr.onreadystatechange = () => {
if (_xhr.readyState != 4 || _xhr.status < 200)
return false;
try {
let data = JSON.parse(_xhr.responseText);
(data.hasOwnProperty('zonekeyResource')) && (this.floder = data.zonekeyResource.floder);
(data.hasOwnProperty('FileBean')) && (this.FileBean = data.FileBean);
} catch (e) {
console.log(e);
}
}
let blob = this.sliceFile(this.currentFile, pos, pos + this.filePiece);
let range = "bytes " + pos + "-" + (pos + blob.size) + "/" + this.currentFile.size;
let purl = this.floder ? (this.postUrl + '&floder=' + this.floder) : this.postUrl;
_xhr.open("POST", purl, !0);
_xhr.setRequestHeader("Content-Range", range);
_xhr.setRequestHeader("Content-type", "application/x-www-four-urlencoded");
_xhr.send(blob);
},
loadHandler(event){
let xhr = this.XHR;
switch (event.type) {
case "load":
console.log("load");
let uploaded = 0;
let respJson = null;
let bError = !1;
try {
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 308)) {
uploaded = (respJson = eval("(" + xhr.responseText + ")")) ? respJson.start : -1;
} else if (xhr.status < 500 && xhr.status >= 400) {
bError = !0;
} else if (xhr.status < 200) {
return;
}
/** the response can't process the request, so throws out the error. */
bError = bError || respJson.success == false;
} catch (e) {
bError = this.retriedTimes > 2;
if (!bError) {
// this.retry();
return;
}
}
//check whether upload complete yet
if (uploaded < this.currentFile.size - 1) {
this.retriedTimes = 0;
this.uploadFile(uploaded);
} else {
this.endFun(this.cfIndex, {floder: this.floder, fileBean: this.FileBean, showName: this.currentFile.name});
let files = this.files;
if (files.length - 1 > this.cfIndex)
this.upload(files[++this.cfIndex]);
else
this.loading = false;
}
break;
case "loaded":
console.log("loaded");
break;
case "progress": {
// console.log('------------->progressBack',event)
let total = this.currentFile.size, loaded = this.bytesStart + event.loaded,
now = Date.now(), cost = (now - this.preTime) / 1E3, totalSpeeds = 0;
if (0.68 <= cost || 0 === this.bytesSpeeds.length) {
this.bytesPrevLoaded = Math.max(this.bytesStart, this.bytesPrevLoaded);
this.bytesSpeed = Math.round((loaded - this.bytesPrevLoaded) / cost);
this.bytesPrevLoaded = loaded;
this.preTime = now;
5 < this.bytesSpeeds.length && this.bytesSpeeds.shift();
5 > this.bytesSpeeds.length && (this.bytesSpeed = this.bytesSpeed / 2);
this.bytesSpeeds.push(this.bytesSpeed);
for (let i = 0; i < this.bytesSpeeds.length; i++)
totalSpeeds += this.bytesSpeeds[i];
this.bytesSpeed = Math.round(totalSpeeds / this.bytesSpeeds.length);
this.remainTime = Math.ceil((total - loaded) / this.bytesSpeed);
}
this.progressFun({
videoIndex: this.cfIndex,
originEvent: event,
bytesLoaded: loaded,
bytesTotal: total,
bytesSpeed: this.bytesSpeed,
remainTime: this.remainTime,
percentLoaded: Math.min(100, Math.floor(1E4 * loaded / total) / 100)
});
}
break;
}
},
deleteLoading(index){
this.files.splice(index, 1);
if (index == this.cfIndex) {
this.cancelUpload();
this.delBack(index);
if (this.files.length - 1 > this.cfIndex)
this.upload(this.files[this.cfIndex]);
else
this.cfIndex = this.files.length - 1;
}
else
this.delBack(index);
},
// 继续下载
resumeUpload(){
// 如果当前不在下载状态
if (!this.loading) {
console.log('---------->total',this.files.length,this.cfIndex);
if (this.files.length - 1 > this.cfIndex)
this.upload(this.files[++this.cfIndex]);
}
},
cancelUpload() {
this.XHR && (this.XHR.abort(), this.resetXhr());
this.loading = false;
},
resetXhr(){
if (this.XHR) {
try {
this.XHR.upload.removeEventListener("progress", this.xhrHandler)
this.XHR.removeEventListener("loadend", this.xhrHandler)
this.XHR.removeEventListener("load", this.xhrHandler)
} catch (e) {
throw e;
}
this.XHR = null;
}
},
bytesPrevLoaded: 0, bytesSpeeds: [], bytesStart: 0, preTime: 0,
sliceFile(f, startPos, endPos) {
startPos = startPos || 0;
endPos = endPos || 0;
return f.slice ? f.slice(startPos, endPos) : f.webkitSlice ? f.webkitSlice(startPos, endPos) : f.mozSlice ? f.mozSlice(startPos, endPos) : f;
},
removeFile(){
}
};
function fExtend(a, b) {
var c = 2 < arguments.length ? [arguments[2]] : null;
return function () {
var d = "string" === typeof a ? b[a] : a, e = c ? [arguments[0]].concat(c) : arguments;
return d.apply(b || d, e);
};
}
function fAddVars(json, url, c) {
var _array = [], _sep = "&", f = function (json, c) {
var e = url ? /\[\]$/.test(url) ? url : url + "[" + c + "]" : c;
"undefined" != e && "undefined" != c
&& _array.push("object" === typeof json
? fAddVars(json, e, !0)
: "[object Function]" === Object.prototype.toString.call(json)
? encodeURI(e) + "=" + encodeURI(json())
: encodeURI(e) + "=" + encodeURI(json))
};
if (!c && url)
_sep = /\?/.test(url) ? /\?$/.test(url) ? "" : "&" : "?",
_array.push(url),
_array.push(fAddVars(json));
else if ("[object Array]" === Object.prototype.toString.call(json)
&& "undefined" != typeof json)
for (var g = 0, c = json.length; g < c; ++g)
f(json[g], g);
else if ("undefined" != typeof json && null !== json && "object" === typeof json)
for (g in json)
f(json[g], g);
else
_array.push(encodeURI(url) + "=" + encodeURI(json));
return _array.join(_sep).replace(/^&/, "").replace(/%20/g, "+")
}
function fMergeJson(base, extend) {
var result = {};
for (var attr in base)
result[attr] = base[attr];
for (var attr in extend)
result[attr] = extend[attr];
return result;
}
export default UploadUtilBatch;