2020-03-09 vue分片上传

<el-breadcrumb separator-class="el-icon-arrow-right">

<el-breadcrumb-item :to="{ path: '/main/adminManageHome' }">首页</el-breadcrumb-item>

<el-breadcrumb-item>多媒体管理</el-breadcrumb-item>

</el-breadcrumb>

</div >

<el-tabs v-model="roler" @tab-click="handleClick">

<el-tab-pane name="all" >

<el-button-group class="btbg">

<el-upload

ref="upload"

class="upload-demo"

action="/admin/multimedia/upload"

:on-preview="handlePreview"

:on-remove="handleRemove"

:before-remove="beforeRemove"

:on-success="successRes"

:limit="1"

multiple

:on-exceed="handleExceed"

:file-list="fileList">

<el-button type="success" size="small" plain>上传<i class="el-icon-upload el-icon--right"></i></el-button>

</el-upload>

</el-button-group>

<el-select v-model="value" placeholder="请选择多媒体类型" size="small" @change = "changeVal">

<el-option

v-for="item in mediaType"

:key="item.value"

:label="item.label"

:value="item.value">

</el-option>

</el-select>

<p>

文件：<input type="file" name="file" id="uploadfile"/>

</p>

<p>

</p>

</div>

<loading-tip :show-load="loading"></loading-tip>

<el-table ref="multipleTable" :data="bookList" tooltip-effect="dark" style="min-width: 1200" @filter-change="filterStatus" @sort-change="sortbydate" @selection-change="handleSelectionChange" >

<el-table-column class="tableCheck" type="selection" width="30"></el-table-column>

<el-table-column type="index" label="序号" width="50"></el-table-column>

<el-table-column prop="name" label="名称" size="medium" show-overflow-tooltip >

<!--<template slot-scope="scope">

<router-link class="hover_color" :to="{path:'/main/bookManage/bookMsg',query:{addOredite:'1',type:'book1',id:scope.row.id}}">{{scope.row.title}}</router-link>

</template>-->

</el-table-column>

<el-table-column prop="seriesTitle" label="丛书" width="210" show-overflow-tooltip ></el-table-column>

<el-table-column class="filttb" prop="status" label="状态" :filters="filteList" column-key="status" :filter-method="filterTag" :formatter="statusformat" width="80"></el-table-column>

<el-table-column prop="isbn" label="ISBN" width="150"></el-table-column>

<el-table-column prop="createTime" label="创建日期" :formatter="dateFormat2" width="90"></el-table-column>

<el-table-column prop="publishDate" label="出版日期" :formatter="dateFormat" width="90"></el-table-column>

<el-table-column prop="updateTime" label="更新时间" :formatter="updateTimeFormat" :sortable="true" width="100"></el-table-column>

<el-table-column prop="lastEditor" label="最后编辑人" width="100"></el-table-column>

<el-table-column label="操作" width="130px">

</template>

</el-table-column>

</el-table>

<el-pagination background layout="total, prev, pager, next, jumper" :page-size="limit" @current-change="handleCurrentChange" :current-page.sync="curPage" :total="total">

</el-pagination>

</div>

</el-tab-pane>

</el-tabs>

<el-input class="inputsc bknameInput" v-model="searchWord" size="mini" placeholder="请输入图书名"></el-input>

<el-input class="inputsc" v-model="isbn" size="mini" placeholder="请输入ISBN"></el-input>

<el-date-picker class="inputsc" v-model="startDate" size="mini" type="date" placeholder="出版日期" format="yyyy年MM月dd日" value-format="yyyy-MM-dd"></el-date-picker>

<el-date-picker class="inputsc" v-model="endDate" size="mini" type="date" placeholder="出版日期" format="yyyy年MM月dd日" value-format="yyyy-MM-dd"></el-date-picker>

</div>

<el-dialog title="提示" :visible.sync="dialog" width="30%" >

<span>请选择编辑：</span>

<el-select v-model="editor" placeholder="请选择">

<el-option v-for="item in editorList" :key="item.userId" :label="item.username" :value="item.userId">

</el-option>

</el-select>

<el-button @click="dialog = false">取消</el-button>

<el-button type="primary" @click="bookAllocation">确定</el-button>

</span>

</el-dialog>

<el-dialog :title="popTitle" :visible.sync="resourceTip" width="30%" >

<el-select v-model="resourceOrderId" size="mini" placeholder="请选择" style="width:100%">

<el-option v-for="item in resourceList" :key="item.id" :label="item.name" :value="item.id">

</el-option>

</el-select>

</div>

<el-input size="mini" v-model="newOrder.name" placeholder="请输入内容"></el-input>

<el-input v-model="newOrder.abstracts" type="textarea" :rows="3" placeholder="请输入内容" > </el-input>

</div>

</div>

</span>

</el-dialog>

</div>

</template>

</script>

import {createAddResource} from '../../assets/js/mixins.js';

//import _ from 'vue-upload-component';

import loadingTip from '../loadingTip';

export default{

name:'bookManage',

data () {

return{

loading:false,

isbn: '',

seriesTitle:'',

dialog: false,

resourceTip: false,

multipleSelection: [],

curPage: 1,

limit: 14,

filteList: [

{ text: '已发布', value: '6' },

{ text: '取消发布', value: '7' }

startDate:'',

endDate:'',

isshow: false,

fileList: [],

total: 0,

bookList: [],

statusList: [],

searchWord: '',

author: '',

sourceType: '',

sidx:'',

order: 'desc',

ids: [],

userInfo: '',

editorList: [],

editor:'',

roler:'all',

resourceList: [],

resourceOrderId:'',

permision:'',

isNewCreate:false,

newOrder:{},

popTitle:'加入书单',

mediaType: [{

value: '1',

label: '视频'

}, {

value: '0',

label: '音频'

}],

value: '',

typeCode:1,

beginDate: '',

endDate: '',

success:0,

hexcase: 0,

b64pad: '',

chrsz:8,

uuid:''

}

components:{loadingTip},

mixins:[createAddResource],

methods:{

hexMd5(s){

let _this = this;

return _this.binl2hex(_this.core_md5(_this.str2binl(s), s.length * _this.chrsz));

b64_md5(s){

let _this = this;

return _this.binl2b64(_this.core_md5(_this.str2binl(s), s.length * _this.chrsz));

hex_hmac_md5(key, data) {

let _this = this;

return _this.binl2hex(_this.core_hmac_md5(key, data));

b64_hmac_md5(key, data) {

let _this = this;

return _this.binl2b64(_this.core_hmac_md5(key, data));

calcMD5(s){

let _this = this;

return _this.binl2hex(_this.core_md5(_this.str2binl(s), s.length * _this.chrsz));

md5_vm_test(){

let _this = this;

return _this.hexMd5("abc") == "900150983cd24fb0d6963f7d28e17f72";

core_md5(x, len){

let _this = this;

x[len >> 5] |= 0x80 << ((len) % 32);

x[(((len + 64) >>> 9) << 4) + 14] = len;

var a = 1732584193;

var b = -271733879;

var c = -1732584194;

var d = 271733878;

for(var i = 0; i < x.length; i += 16){

var olda = a;

var oldb = b;

var oldc = c;

var oldd = d;

a = _this.md5_ff(a, b, c, d, x[i+ 0], 7 , -680876936);

d = _this.md5_ff(d, a, b, c, x[i+ 1], 12, -389564586);

c = _this.md5_ff(c, d, a, b, x[i+ 2], 17, 606105819);

b = _this.md5_ff(b, c, d, a, x[i+ 3], 22, -1044525330);

a = _this.md5_ff(a, b, c, d, x[i+ 4], 7 , -176418897);

d = _this.md5_ff(d, a, b, c, x[i+ 5], 12, 1200080426);

c = _this.md5_ff(c, d, a, b, x[i+ 6], 17, -1473231341);

b = _this.md5_ff(b, c, d, a, x[i+ 7], 22, -45705983);

a = _this.md5_ff(a, b, c, d, x[i+ 8], 7 , 1770035416);

d = _this.md5_ff(d, a, b, c, x[i+ 9], 12, -1958414417);

c = _this.md5_ff(c, d, a, b, x[i+10], 17, -42063);

b = _this.md5_ff(b, c, d, a, x[i+11], 22, -1990404162);

a = _this.md5_ff(a, b, c, d, x[i+12], 7 , 1804603682);

d = _this.md5_ff(d, a, b, c, x[i+13], 12, -40341101);

c = _this.md5_ff(c, d, a, b, x[i+14], 17, -1502002290);

b = _this.md5_ff(b, c, d, a, x[i+15], 22, 1236535329);

a = _this.md5_gg(a, b, c, d, x[i+ 1], 5 , -165796510);

d = _this.md5_gg(d, a, b, c, x[i+ 6], 9 , -1069501632);

c = _this.md5_gg(c, d, a, b, x[i+11], 14, 643717713);

b = _this.md5_gg(b, c, d, a, x[i+ 0], 20, -373897302);

a = _this.md5_gg(a, b, c, d, x[i+ 5], 5 , -701558691);

d = _this.md5_gg(d, a, b, c, x[i+10], 9 , 38016083);

c = _this.md5_gg(c, d, a, b, x[i+15], 14, -660478335);

b = _this.md5_gg(b, c, d, a, x[i+ 4], 20, -405537848);

a = _this.md5_gg(a, b, c, d, x[i+ 9], 5 , 568446438);

d = _this.md5_gg(d, a, b, c, x[i+14], 9 , -1019803690);

c = _this.md5_gg(c, d, a, b, x[i+ 3], 14, -187363961);

b = _this.md5_gg(b, c, d, a, x[i+ 8], 20, 1163531501);

a = _this.md5_gg(a, b, c, d, x[i+13], 5 , -1444681467);

d = _this.md5_gg(d, a, b, c, x[i+ 2], 9 , -51403784);

c = _this.md5_gg(c, d, a, b, x[i+ 7], 14, 1735328473);

b = _this.md5_gg(b, c, d, a, x[i+12], 20, -1926607734);

a = _this.md5_hh(a, b, c, d, x[i+ 5], 4 , -378558);

d = _this.md5_hh(d, a, b, c, x[i+ 8], 11, -2022574463);

c = _this.md5_hh(c, d, a, b, x[i+11], 16, 1839030562);

b = _this.md5_hh(b, c, d, a, x[i+14], 23, -35309556);

a = _this.md5_hh(a, b, c, d, x[i+ 1], 4 , -1530992060);

d = _this.md5_hh(d, a, b, c, x[i+ 4], 11, 1272893353);

c = _this.md5_hh(c, d, a, b, x[i+ 7], 16, -155497632);

b = _this.md5_hh(b, c, d, a, x[i+10], 23, -1094730640);

a = _this.md5_hh(a, b, c, d, x[i+13], 4 , 681279174);

d = _this.md5_hh(d, a, b, c, x[i+ 0], 11, -358537222);

c = _this.md5_hh(c, d, a, b, x[i+ 3], 16, -722521979);

b = _this.md5_hh(b, c, d, a, x[i+ 6], 23, 76029189);

a = _this.md5_hh(a, b, c, d, x[i+ 9], 4 , -640364487);

d = _this.md5_hh(d, a, b, c, x[i+12], 11, -421815835);

c = _this.md5_hh(c, d, a, b, x[i+15], 16, 530742520);

b = _this.md5_hh(b, c, d, a, x[i+ 2], 23, -995338651);

a = _this.md5_ii(a, b, c, d, x[i+ 0], 6 , -198630844);

d = _this.md5_ii(d, a, b, c, x[i+ 7], 10, 1126891415);

c = _this.md5_ii(c, d, a, b, x[i+14], 15, -1416354905);

b = _this.md5_ii(b, c, d, a, x[i+ 5], 21, -57434055);

a = _this.md5_ii(a, b, c, d, x[i+12], 6 , 1700485571);

d = _this.md5_ii(d, a, b, c, x[i+ 3], 10, -1894986606);

c = _this.md5_ii(c, d, a, b, x[i+10], 15, -1051523);

b = _this.md5_ii(b, c, d, a, x[i+ 1], 21, -2054922799);

a = _this.md5_ii(a, b, c, d, x[i+ 8], 6 , 1873313359);

d = _this.md5_ii(d, a, b, c, x[i+15], 10, -30611744);

c = _this.md5_ii(c, d, a, b, x[i+ 6], 15, -1560198380);

b = _this.md5_ii(b, c, d, a, x[i+13], 21, 1309151649);

a = _this.md5_ii(a, b, c, d, x[i+ 4], 6 , -145523070);

d = _this.md5_ii(d, a, b, c, x[i+11], 10, -1120210379);

c = _this.md5_ii(c, d, a, b, x[i+ 2], 15, 718787259);

b = _this.md5_ii(b, c, d, a, x[i+ 9], 21, -343485551);

a = _this.safe_add(a, olda);

b = _this.safe_add(b, oldb);

c = _this.safe_add(c, oldc);

d = _this.safe_add(d, oldd);

}

return Array(a, b, c, d);

md5_cmn(q, a, b, x, s, t){

let _this = this;

return _this.safe_add(_this.bit_rol(_this.safe_add(_this.safe_add(a, q), _this.safe_add(x, t)), s),b);

md5_ff(a, b, c, d, x, s, t){

let _this = this;

return _this.md5_cmn((b & c) | ((~b) & d), a, b, x, s, t);

md5_gg(a, b, c, d, x, s, t){

let _this = this;

return _this.md5_cmn((b & d) | (c & (~d)), a, b, x, s, t);

md5_hh(a, b, c, d, x, s, t){

let _this = this;

return _this.md5_cmn(b ^ c ^ d, a, b, x, s, t);

md5_ii(a, b, c, d, x, s, t){

let _this = this;

return _this.md5_cmn(c ^ (b | (~d)), a, b, x, s, t);

core_hmac_md5(key, data){

let _this = this;

var bkey = str2binl(key);

if(bkey.length > 16) bkey = _this.core_md5(bkey, key.length * _this.chrsz);

var ipad = Array(16), opad = Array(16);

for(var i = 0; i < 16; i++)

{

ipad[i] = bkey[i] ^ 0x36363636;

opad[i] = bkey[i] ^ 0x5C5C5C5C;

}

var hash = _this.core_md5(ipad.concat(str2binl(data)), 512 + data.length * _this.chrsz);

return _this.core_md5(opad.concat(hash), 512 + 128);

safe_add(x, y){

var lsw = (x & 0xFFFF) + (y & 0xFFFF);

var msw = (x >> 16) + (y >> 16) + (lsw >> 16);

return (msw << 16) | (lsw & 0xFFFF);

bit_rol(num, cnt){

return (num << cnt) | (num >>> (32 - cnt));

str2binl(str){

let _this = this;

var bin = Array();

var mask = (1 << _this.chrsz) - 1;

for(var i = 0; i < str.length * _this.chrsz; i += _this.chrsz)

bin[i>>5] |= (str.charCodeAt(i / _this.chrsz) & mask) << (i%32);

return bin;

binl2hex(binarray){

let _this = this;

var hex_tab = _this.hexcase ? "0123456789ABCDEF" : "0123456789abcdef";

var str = "";

for(var i = 0; i < binarray.length * 4; i++)

{

str += hex_tab.charAt((binarray[i>>2] >> ((i%4)*8+4)) & 0xF) +

hex_tab.charAt((binarray[i>>2] >> ((i%4)*8 )) & 0xF);

}

return str;

binl2b64(binarray){

var tab = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";

var str = "";

for(var i = 0; i < binarray.length * 4; i += 3)

{

var triplet = (((binarray[i >> 2] >> 8 * ( i %4)) & 0xFF) << 16)

| (((binarray[i+1 >> 2] >> 8 * ((i+1)%4)) & 0xFF) << 8 )

| ((binarray[i+2 >> 2] >> 8 * ((i+2)%4)) & 0xFF);

for(var j = 0; j < 4; j++)

{

if(i * 8 + j * 6 > binarray.length * 32) str += b64pad;

else str += tab.charAt((triplet >> 6*(3-j)) & 0x3F);

}

return str;

getUuid() {

let _this = this;

_this.$http({

method: 'post',

url: '/admin/multimedia/getUuid',

async: true,

processData: false,

contentType: false,

}).then((res) =>{

console.log(res);

_this.uuid=res.data.uuid;

});

uploadPart(fileName,uuid,data,blockNum,total,fail) {

if (fail==3){

return "FAIL";

}

let _this = this;

var form = new FormData();

var r = new FileReader();

r.readAsBinaryString(data);

r.onload = function(e) {

var blob= e.target.result;

var md51=_this.hexMd5(blob);

form.append("uuid",uuid);

form.append("fileName",fileName);

form.append("md5",md51);

form.append("blockNum",blockNum);

form.append("data",data);

form.append("total",total);

_this.$http({

method: 'post',

url: '/admin/multimedia/upload',

data: form,

async: true,

processData: false,

contentType: false,

}).then((res) =>{

if(res.data.status=="FAIL"){

_this.uploadPart(fileName,uuid,data,blockNum,total,fail+1);

}else{

_this.success++;

}

});

return "SUCCESS";

}

uplaodFile(file,fileName,uuid,shardCout,shardSize) {

for(var i=0;i<shardCout;i++){

var begin=i*shardSize;

var end=file.size>begin+shardSize?begin+shardSize:file.size;

var data=file.slice(begin,end);

if(this.uploadPart(fileName,uuid,data,i,shardCout,0)=="FAIL"){

return "FAIL";

}

return "SUCCESS";

upClick(){

let _this = this;

var file=$("#uploadfile")[0].files[0];

var s = file.size;

var shardSize = 50 * 1024 * 1024,

shardCount = Math.ceil(s / shardSize);

_this.$http({

method: 'post',

url: '/admin/multimedia/getUuid',

async: true,

processData: false,

contentType: false,

}).then((res) =>{

_this.uuid=res.data.uuid;

_this.uplaodFile(file,file.name,_this.uuid,shardCount,shardSize);

});

changeVal(){

let _this = this;

console.log(_this.value)

if(_this.value == 1){

_this.typeCode = 1;

_this.getBookList();

}

if(_this.value == 0){

_this.typeCode = 0;

_this.getBookList();

}

handleRemove(file, fileList) {

console.log(file, fileList);

handlePreview(file) {

console.log(file);

handleExceed(files, fileList) {

// this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);

beforeRemove(file, fileList) {

return this.$confirm(`确定移除 ${ file.name }？`);

successRes(response, file, fileList){

console.log(response)

handleClick(tab, event) {

this.curPage = 1;

this.getBookList()

search() {

this.isshow = this.isshow?false:true;

showBorder(){

return (this.permision.indexOf('cms:bookresource:update')>-1)&&(this.permision.indexOf('cms:bookcatalogresource:join')>-1);

clear(){

this.searchWord = '';

this.seriesTitle = '';

this.startDate = '';

this.endDate = '';

this.isbn = '';

this.curPage = 1;

this.getBookList();

filterTag(value, row){

return true;

filterStatus(filters){

this.statusList = filters.status;

this.getBookList();

statusformat(row, column, cellValue, index){

for (const iterm of this.filteList) {

if(iterm.value==cellValue){

return iterm.text;

}

authorFormat(row, column, cellValue, index){

let a = [];

for (const author of row.authorList) {

if(author.role=="著"){

a.push(author.name)

}

return a.join(' ');

dateFormat2(row, column, cellValue, index){

if(cellValue){

return cellValue.split(' ')[0]

}

dateFormat(row, column, cellValue, index){

if(cellValue){

return cellValue.split('-')[0]+"年"+cellValue.split('-')[1]+"月"

}

updateTimeFormat(row, column, cellValue, index){

if(cellValue){

return cellValue.split(' ')[0]

}

handleSelectionChange(val) {

this.multipleSelection = val;

this.ids = [];

if(this.multipleSelection.length > 0){

for (const data of this.multipleSelection) {

this.ids.push(data.id)

}

handleCurrentChange(val) {

this.curPage = val;

this.getBookList()

myPageChange(val){

this.curPage = val;

this.getBookList()

lookDetail(data){

this.$router.push({path:'/main/bookManage/lookDetail',query:{id:data.id}});

bookAllocation(){

/** * 分配任务 */

if(this.editor==''){

return

}

let _this = this;

_this.$http({

method: 'post',

url: '/admin/cms/bookresource/allocation',

data: {

ids: _this.ids,

userID: _this.editor

transformRequest: [function (data) {

let ret = ''

for (let it in data) {

ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'

}

return ret

}],

headers: {

'Content-Type': 'application/x-www-form-urlencoded'

}

}).then((res) =>{

if(res.data.code==0){

_this.dialog = false;

_this.$message.success('分配成功！');

_this.getBookList()

}

});

update(data){

this.$router.push({path:'/main/bookManage/addResource',query:{addOredite:'1',type:'book',id:data.id}})

sortbydate(column, prop, order){

this.sidx = column.prop;

this.order = column.order=="ascending"?"asc":"desc";

this.getBookList();

getBookList(num){

let _this = this;

_this.loading = true;

if(num){ _this.curPage = 1; //检索时重置页数

}

_this.$http({

method: 'post',

url: '/admin/multimedia/query_multimedia',

data:{

page:_this.curPage,

limit: _this.limit,

typeCode:_this.typeCode

headers: {

'Content-Type': 'application/json; charset=UTF-8'

}

}).then(function (res) {

_this.total = res.data.data.totalCount;

_this.bookList = res.data.data.list;

console.log(_this.bookList)

_this.loading = false;

});

getUserMsg(){

let _this = this;

_this.$http({

method: 'get',

url: '/admin/sys/user/info?_' + new Date().getTime(),

headers: {

'Content-Type': 'application/json;charset=UTF-8'

}

}).then(function (res) {

_this.userInfo = res.data.user;

});

getEditorList(){

let _this = this;

_this.$http({

method: 'get',

url: '/admin/cms/bookresource/editors',

headers: {

'Content-Type': 'application/json;charset=UTF-8'

}

}).then(function (res) {

_this.editorList = res.data.users;

});

created(){

this.permision = sessionStorage.getItem('permission');

this.getBookList();

this.getUserMsg();

this.getEditorList();

this.getResourceOrderList()

}

</script>

<style>

.el-button-group .el-button--success:first-child{

border-color: #c2e7b0 !important;

}

</style>

@import '../../assets/style/font_me.css';

@import '../../assets/style/rtcont.css';

.rt_cont{

background: #fff;

}

.handle{

padding-bottom: 6px;

border-bottom: 1px solid #e5e5e5;

}

.btnhandle >>> .el-tabs .el-tabs__header{

margin-bottom: 10px;

}

.btbg >button{

height: 28px;

padding: 6px 14px;

font-size: 14px;

border-right: 1px solid #b3d8ff;

border-left-color: #b3d8ff!important;

}

</style>

2020-03-09 vue分片上传

推荐阅读更多精彩内容