本篇文章为你整理了大文件切片上传到服务器（大文件切片上传到服务器上）的详细内容，包含有大文件切片上传到服务器失败 大文件切片上传到服务器上 大文件分片上传 文件太大无法切片 大文件切片上传到服务器，希望能帮助你了解 大文件切片上传到服务器。
/* SparkMD5 - https://github.com/satazor/js-spark-md5 */
/* SparkMD5 - https://codechina.csdn.net/mirrors/satazor/js-spark-md5/-/blob/master/spark-md5.js */
//spark-md5 begin
(function (factory) {
if (typeof exports === "object") {
module.exports = factory();
} else if (typeof define === "function" define.amd) {
define(factory);
} else {
var glob;
try {
glob = window;
} catch (e) {
glob = self;
}
glob.SparkMD5 = factory();
}
})(function (undefined) {
"use strict";
var add32 = function (a, b) {
return (a + b) 4294967295;
},
hex_chr = [
"0",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"a",
"b",
"c",
"d",
"e",
"f",
];
function cmn(q, a, b, x, s, t) {
a = add32(add32(a, q), add32(x, t));
return add32((a s) (a (32 - s)), b);
}
d = x[3];
a += (((b c) (~b d)) + k[0] - 680876936) 0;
a = (((a 7) (a 25)) + b) 0;
d += (((a b) (~a c)) + k[1] - 389564586) 0;
d = (((d 12) (d 20)) + a) 0;
c += (((d a) (~d b)) + k[2] + 606105819) 0;
c = (((c 17) (c 15)) + d) 0;
b += (((c d) (~c a)) + k[3] - 1044525330) 0;
b = (((b 22) (b 10)) + c) 0;
a += (((b c) (~b d)) + k[4] - 176418897) 0;
a = (((a 7) (a 25)) + b) 0;
d += (((a b) (~a c)) + k[5] + 1200080426) 0;
d = (((d 12) (d 20)) + a) 0;
c += (((d a) (~d b)) + k[6] - 1473231341) 0;
c = (((c 17) (c 15)) + d) 0;
b += (((c d) (~c a)) + k[7] - 45705983) 0;
b = (((b 22) (b 10)) + c) 0;
a += (((b c) (~b d)) + k[8] + 1770035416) 0;
a = (((a 7) (a 25)) + b) 0;
d += (((a b) (~a c)) + k[9] - 1958414417) 0;
d = (((d 12) (d 20)) + a) 0;
c += (((d a) (~d b)) + k[10] - 42063) 0;
c = (((c 17) (c 15)) + d) 0;
b += (((c d) (~c a)) + k[11] - 1990404162) 0;
b = (((b 22) (b 10)) + c) 0;
a += (((b c) (~b d)) + k[12] + 1804603682) 0;
a = (((a 7) (a 25)) + b) 0;
d += (((a b) (~a c)) + k[13] - 40341101) 0;
d = (((d 12) (d 20)) + a) 0;
c += (((d a) (~d b)) + k[14] - 1502002290) 0;
c = (((c 17) (c 15)) + d) 0;
b += (((c d) (~c a)) + k[15] + 1236535329) 0;
b = (((b 22) (b 10)) + c) 0;
a += (((b d) (c ~d)) + k[1] - 165796510) 0;
a = (((a 5) (a 27)) + b) 0;
d += (((a c) (b ~c)) + k[6] - 1069501632) 0;
d = (((d 9) (d 23)) + a) 0;
c += (((d b) (a ~b)) + k[11] + 643717713) 0;
c = (((c 14) (c 18)) + d) 0;
b += (((c a) (d ~a)) + k[0] - 373897302) 0;
b = (((b 20) (b 12)) + c) 0;
a += (((b d) (c ~d)) + k[5] - 701558691) 0;
a = (((a 5) (a 27)) + b) 0;
d += (((a c) (b ~c)) + k[10] + 38016083) 0;
d = (((d 9) (d 23)) + a) 0;
c += (((d b) (a ~b)) + k[15] - 660478335) 0;
c = (((c 14) (c 18)) + d) 0;
b += (((c a) (d ~a)) + k[4] - 405537848) 0;
b = (((b 20) (b 12)) + c) 0;
a += (((b d) (c ~d)) + k[9] + 568446438) 0;
a = (((a 5) (a 27)) + b) 0;
d += (((a c) (b ~c)) + k[14] - 1019803690) 0;
d = (((d 9) (d 23)) + a) 0;
c += (((d b) (a ~b)) + k[3] - 187363961) 0;
c = (((c 14) (c 18)) + d) 0;
b += (((c a) (d ~a)) + k[8] + 1163531501) 0;
b = (((b 20) (b 12)) + c) 0;
a += (((b d) (c ~d)) + k[13] - 1444681467) 0;
a = (((a 5) (a 27)) + b) 0;
d += (((a c) (b ~c)) + k[2] - 51403784) 0;
d = (((d 9) (d 23)) + a) 0;
c += (((d b) (a ~b)) + k[7] + 1735328473) 0;
c = (((c 14) (c 18)) + d) 0;
b += (((c a) (d ~a)) + k[12] - 1926607734) 0;
b = (((b 20) (b 12)) + c) 0;
a += ((b ^ c ^ d) + k[5] - 378558) 0;
a = (((a 4) (a 28)) + b) 0;
d += ((a ^ b ^ c) + k[8] - 2022574463) 0;
d = (((d 11) (d 21)) + a) 0;
c += ((d ^ a ^ b) + k[11] + 1839030562) 0;
c = (((c 16) (c 16)) + d) 0;
b += ((c ^ d ^ a) + k[14] - 35309556) 0;
b = (((b 23) (b 9)) + c) 0;
a += ((b ^ c ^ d) + k[1] - 1530992060) 0;
a = (((a 4) (a 28)) + b) 0;
d += ((a ^ b ^ c) + k[4] + 1272893353) 0;
d = (((d 11) (d 21)) + a) 0;
c += ((d ^ a ^ b) + k[7] - 155497632) 0;
c = (((c 16) (c 16)) + d) 0;
b += ((c ^ d ^ a) + k[10] - 1094730640) 0;
b = (((b 23) (b 9)) + c) 0;
a += ((b ^ c ^ d) + k[13] + 681279174) 0;
a = (((a 4) (a 28)) + b) 0;
d += ((a ^ b ^ c) + k[0] - 358537222) 0;
d = (((d 11) (d 21)) + a) 0;
c += ((d ^ a ^ b) + k[3] - 722521979) 0;
c = (((c 16) (c 16)) + d) 0;
b += ((c ^ d ^ a) + k[6] + 76029189) 0;
b = (((b 23) (b 9)) + c) 0;
a += ((b ^ c ^ d) + k[9] - 640364487) 0;
a = (((a 4) (a 28)) + b) 0;
d += ((a ^ b ^ c) + k[12] - 421815835) 0;
d = (((d 11) (d 21)) + a) 0;
c += ((d ^ a ^ b) + k[15] + 530742520) 0;
c = (((c 16) (c 16)) + d) 0;
b += ((c ^ d ^ a) + k[2] - 995338651) 0;
b = (((b 23) (b 9)) + c) 0;
a += ((c ^ (b ~d)) + k[0] - 198630844) 0;
a = (((a 6) (a 26)) + b) 0;
d += ((b ^ (a ~c)) + k[7] + 1126891415) 0;
d = (((d 10) (d 22)) + a) 0;
c += ((a ^ (d ~b)) + k[14] - 1416354905) 0;
c = (((c 15) (c 17)) + d) 0;
b += ((d ^ (c ~a)) + k[5] - 57434055) 0;
b = (((b 21) (b 11)) + c) 0;
a += ((c ^ (b ~d)) + k[12] + 1700485571) 0;
a = (((a 6) (a 26)) + b) 0;
d += ((b ^ (a ~c)) + k[3] - 1894986606) 0;
d = (((d 10) (d 22)) + a) 0;
c += ((a ^ (d ~b)) + k[10] - 1051523) 0;
c = (((c 15) (c 17)) + d) 0;
b += ((d ^ (c ~a)) + k[1] - 2054922799) 0;
b = (((b 21) (b 11)) + c) 0;
a += ((c ^ (b ~d)) + k[8] + 1873313359) 0;
a = (((a 6) (a 26)) + b) 0;
d += ((b ^ (a ~c)) + k[15] - 30611744) 0;
d = (((d 10) (d 22)) + a) 0;
c += ((a ^ (d ~b)) + k[6] - 1560198380) 0;
c = (((c 15) (c 17)) + d) 0;
b += ((d ^ (c ~a)) + k[13] + 1309151649) 0;
b = (((b 21) (b 11)) + c) 0;
a += ((c ^ (b ~d)) + k[4] - 145523070) 0;
a = (((a 6) (a 26)) + b) 0;
d += ((b ^ (a ~c)) + k[11] - 1120210379) 0;
d = (((d 10) (d 22)) + a) 0;
c += ((a ^ (d ~b)) + k[2] + 718787259) 0;
c = (((c 15) (c 17)) + d) 0;
b += ((d ^ (c ~a)) + k[9] - 343485551) 0;
b = (((b 21) (b 11)) + c) 0;
x[0] = (a + x[0]) 0;
x[1] = (b + x[1]) 0;
x[2] = (c + x[2]) 0;
x[3] = (d + x[3]) 0;
}
s.charCodeAt(i) +
(s.charCodeAt(i + 1) 8) +
(s.charCodeAt(i + 2) 16) +
(s.charCodeAt(i + 3) 24);
}
return md5blks;
}
md5blks[i 2] =
a[i] + (a[i + 1] 8) + (a[i + 2] 16) + (a[i + 3] 24);
}
return md5blks;
}
var n = s.length,
state = [1732584193, -271733879, -1732584194, 271733878],
i,
length,
tail,
tmp,
lo,
hi;
for (i = 64; i i += 64) {
md5cycle(state, md5blk(s.substring(i - 64, i)));
}
s = s.substring(i - 64);
length = s.length;
tail = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
for (i = 0; i length; i += 1) {
tail[i 2] = s.charCodeAt(i) (i % 4 3);
}
tail[i 2] = 128 (i % 4 3);
if (i 55) {
md5cycle(state, tail);
for (i = 0; i i += 1) {
tail[i] = 0;
}
}
tmp = n * 8;
tmp = tmp.toString(16).match(/(.*?)(.{0,8})$/);
lo = parseInt(tmp[2], 16);
hi = parseInt(tmp[1], 16) 0;
tail[14] = lo;
tail[15] = hi;
md5cycle(state, tail);
return state;
}
var n = a.length,
state = [1732584193, -271733879, -1732584194, 271733878],
i,
length,
tail,
tmp,
lo,
hi;
for (i = 64; i i += 64) {
md5cycle(state, md5blk_array(a.subarray(i - 64, i)));
}
a = i - 64 n ? a.subarray(i - 64) : new Uint8Array(0);
length = a.length;
tail = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
for (i = 0; i length; i += 1) {
tail[i 2] = a[i] (i % 4 3);
}
tail[i 2] = 128 (i % 4 3);
if (i 55) {
md5cycle(state, tail);
for (i = 0; i i += 1) {
tail[i] = 0;
}
}
tmp = n * 8;
tmp = tmp.toString(16).match(/(.*?)(.{0,8})$/);
lo = parseInt(tmp[2], 16);
hi = parseInt(tmp[1], 16) 0;
tail[14] = lo;
tail[15] = hi;
md5cycle(state, tail);
return state;
}
for (j = 0; j j += 1) {
s += hex_chr[(n (j * 8 + 4)) 15] + hex_chr[(n (j * 8)) 15];
}
return s;
}
if (hex(md51("hello")) !== "5d41402abc4b2a76b9719d911017c592") {
add32 = function (x, y) {
var lsw = (x 65535) + (y 65535),
msw = (x 16) + (y 16) + (lsw 16);
return (msw 16) (lsw 65535);
};
}
if (typeof ArrayBuffer !== "undefined" !ArrayBuffer.prototype.slice) {
(function () {
function clamp(val, length) {
val = val 0 0;
if (val 0) {
return Math.max(val + length, 0);
}
return Math.min(val, length);
}
ArrayBuffer.prototype.slice = function (from, to) {
var length = this.byteLength,
begin = clamp(from, length),
end = length,
num,
target,
targetArray,
sourceArray;
if (to !== undefined) {
end = clamp(to, length);
}
if (begin end) {
return new ArrayBuffer(0);
}
num = end - begin;
target = new ArrayBuffer(num);
targetArray = new Uint8Array(target);
sourceArray = new Uint8Array(this, begin, num);
targetArray.set(sourceArray);
return target;
};
})();
}
if (/[\u0080-\uFFFF]/.test(str)) {
str = unescape(encodeURIComponent(str));
}
return str;
}
function utf8Str2ArrayBuffer(str, returnUInt8Array) {
var length = str.length,
buff = new ArrayBuffer(length),
arr = new Uint8Array(buff),
i;
for (i = 0; i length; i += 1) {
arr[i] = str.charCodeAt(i);
}
return returnUInt8Array ? arr : buff;
}
function arrayBuffer2Utf8Str(buff) {
return String.fromCharCode.apply(null, new Uint8Array(buff));
}
function concatenateArrayBuffers(first, second, returnUInt8Array) {
var result = new Uint8Array(first.byteLength + second.byteLength);
result.set(new Uint8Array(first));
result.set(new Uint8Array(second), first.byteLength);
return returnUInt8Array ? result : result.buffer;
}
for (x = 0; x length - 1; x += 2) {
bytes.push(parseInt(hex.substr(x, 2), 16));
}
return String.fromCharCode.apply(String, bytes);
}
SparkMD5.prototype.append = function (str) {
this.appendBinary(toUtf8(str));
return this;
};
SparkMD5.prototype.appendBinary = function (contents) {
this._buff += contents;
this._length += contents.length;
var length = this._buff.length,
i;
for (i = 64; i = length; i += 64) {
md5cycle(this._hash, md5blk(this._buff.substring(i - 64, i)));
}
this._buff = this._buff.substring(i - 64);
return this;
};
SparkMD5.prototype.end = function (raw) {
var buff = this._buff,
length = buff.length,
i,
tail = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
ret;
for (i = 0; i length; i += 1) {
tail[i 2] = buff.charCodeAt(i) (i % 4 3);
}
this._finish(tail, length);
ret = hex(this._hash);
if (raw) {
ret = hexToBinaryString(ret);
}
this.reset();
return ret;
};
SparkMD5.prototype.reset = function () {
this._buff = "";
this._length = 0;
this._hash = [1732584193, -271733879, -1732584194, 271733878];
return this;
};
SparkMD5.prototype.getState = function () {
return {
buff: this._buff,
length: this._length,
hash: this._hash,
};
};
SparkMD5.prototype.setState = function (state) {
this._buff = state.buff;
this._length = state.length;
this._hash = state.hash;
return this;
};
SparkMD5.prototype.destroy = function () {
delete this._hash;
delete this._buff;
delete this._length;
};
SparkMD5.prototype._finish = function (tail, length) {
var i = length,
tmp,
lo,
hi;
tail[i 2] = 128 (i % 4 3);
if (i 55) {
md5cycle(this._hash, tail);
for (i = 0; i i += 1) {
tail[i] = 0;
}
}
tmp = this._length * 8;
tmp = tmp.toString(16).match(/(.*?)(.{0,8})$/);
lo = parseInt(tmp[2], 16);
hi = parseInt(tmp[1], 16) 0;
tail[14] = lo;
tail[15] = hi;
md5cycle(this._hash, tail);
};
SparkMD5.hash = function (str, raw) {
return SparkMD5.hashBinary(toUtf8(str), raw);
};
SparkMD5.hashBinary = function (content, raw) {
var hash = md51(content),
ret = hex(hash);
return raw ? hexToBinaryString(ret) : ret;
};
SparkMD5.ArrayBuffer = function () {
this.reset();
};
SparkMD5.ArrayBuffer.prototype.append = function (arr) {
var buff = concatenateArrayBuffers(this._buff.buffer, arr, true),
length = buff.length,
i;
this._length += arr.byteLength;
for (i = 64; i = length; i += 64) {
md5cycle(this._hash, md5blk_array(buff.subarray(i - 64, i)));
}
this._buff =
i - 64 length ?
new Uint8Array(buff.buffer.slice(i - 64)) :
new Uint8Array(0);
return this;
};
SparkMD5.ArrayBuffer.prototype.end = function (raw) {
var buff = this._buff,
length = buff.length,
tail = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
i,
ret;
for (i = 0; i length; i += 1) {
tail[i 2] = buff[i] (i % 4 3);
}
this._finish(tail, length);
ret = hex(this._hash);
if (raw) {
ret = hexToBinaryString(ret);
}
this.reset();
return ret;
};
SparkMD5.ArrayBuffer.prototype.reset = function () {
this._buff = new Uint8Array(0);
this._length = 0;
this._hash = [1732584193, -271733879, -1732584194, 271733878];
return this;
};
SparkMD5.ArrayBuffer.prototype.getState = function () {
var state = SparkMD5.prototype.getState.call(this);
state.buff = arrayBuffer2Utf8Str(state.buff);
return state;
};
SparkMD5.ArrayBuffer.prototype.setState = function (state) {
state.buff = utf8Str2ArrayBuffer(state.buff, true);
return SparkMD5.prototype.setState.call(this, state);
};
SparkMD5.ArrayBuffer.prototype.destroy = SparkMD5.prototype.destroy;
SparkMD5.ArrayBuffer.prototype._finish = SparkMD5.prototype._finish;
SparkMD5.ArrayBuffer.hash = function (arr, raw) {
var hash = md51_array(new Uint8Array(arr)),
ret = hex(hash);
return raw ? hexToBinaryString(ret) : ret;
};
return SparkMD5;
});
import axios from "axios";
//utils工具看：https:///wxchun/p/15892260.html
import utils from "@/utils";
const localUploadFile = {
upload: function (files) {
// console.log(files, "upload");
this.file = files[0]; //上传文件资源
this.fileName = this.file.name; //资源名称
this.fileSize = this.file.size; //资源大小
this.partList = [], //切片数组
this.partsize = 0; //切片大小
this.savedPath = ""; //保存路径
this.hash = "",
this.blobSlice =
File.prototype.slice
File.prototype.mozSlice
File.prototype.webkitSlice;
this.i = 0;
this.funArr = [];
this.isFail = false;
if (!this.blobSlice) {
this.$message.error(错误：上传组件不被此浏览器支持);
return;
}
if (this.fileSize == 0) {
this.$message.error(错误：无效的文件大小);
return;
}
if (this.fileName.substring(
this.fileName.lastIndexOf(".") + 1,
this.fileName.length
) === "") {
this.$message.error(错误：无效的文件类型);
return;
}
// this.preprocess();
this.sendCheckChunk();
},
sendCheckChunk: async function () {
let buffer = await utils.fileParse(this.file, "buffer"),
spark = new SparkMD5.ArrayBuffer();
spark.append(buffer);
this.hash = spark.end();
axios
.get("/apicc/v1/checkChunk", {
params: {
hash: this.hash
}
}, {
headers: {
Content-Type: application/json;charset=UTF-8,
},
})
.then((res) = {
console.log(res, "res");
if (res.data res.data.code == "200") {
this.preprocess();
} else {
this.$message.error(res.data.msg);
}
})
.catch((XMLHttpRequest, textStatus, errorThrown) = {
this.$message.error(网络报错);
});
},
let chunkCount = Math.ceil(this.fileSize / 20971520)
// let chunkCount = Math.ceil(this.fileSize / 838860800)
let partList = [],
cur = 0,
partsize = this.fileSize / chunkCount; //一份的大小
let suffix = /\.([0-9a-zA-Z]+)$/i.exec(this.fileName)[1];
let lastdot = this.fileName.lastIndexOf(".");
let fileName = this.fileName.substring(0, lastdot);
for (let i = 0; i chunkCount; i++) {
let item = {
file: this.file.slice(cur, cur + partsize),
hash: this.hash,
fileName: `${this.hash}_${i}.${suffix}`,
};
cur += partsize;
partList.push(item);
}
this.partList = partList;
// console.log(this, "this");
this.sendRequest();
// this.sendCheckChunk();
},
// 根据100个切片创造100个请求（集合）
let chunkCount = Math.ceil(this.fileSize / 20971520)
let requestList = [];
console.log(this.fileName, "this.fileName");
this.partList.forEach((item, index) = {
// 每一个函数都是发送一个切片的请求
let fun = () = {
let formData = new FormData();
// formData.append("file", item.chunk); //新增切片文件
// formData.append("chunkindex", index); //切片索引
// formData.append("chunktotal", chunkCount); //切片总数
// formData.append("filesize", this.fileSize); //文件总大小
// formData.append("srcFileName", this.fileName); //文件总大小
formData.append("hash", item.hash);
formData.append("file", item.file);
formData.append("fileName", item.fileName);
return axios
.post("/apicc/v1/uploadChunk", formData, {
headers: {
"Content-Type": "multipart/form-data"
},
})
.then((result) = {
result = result.data;
console.log(result, "result124");
if (result.code == 200) {
console.log(result, "result");
// this.isFail = false;
this.savedPath = result.data result.data.pathfile "";
if (this.percent) {
let percent = parseInt(((this.i + 1) / chunkCount) * 100);
this.percent(percent);
}
// 传完的切片我们把它移除掉
this.partList.splice(index, 1);
} else {
// this.isFail = true;
this.err({
"msg": result.msg
})
}
}).catch((v) = {
// if (this.err) {
// this.err(v)
// }
console.log(v);
// this.isFail = true;
});
};
requestList.push(fun);
});
this.funArr = requestList;
this.i = 0;
this.uploadChunk();
},
uploadChunk: async function () {
if (this.i = this.funArr.length) {
//已上传全部
if (this.callback) {
// this.callback(this, this.file, "http://39.103.229.29:7002" + this.savedPath);
let _this = this
console.log(_this.fileName, "_this");
console.log(_this.hash);
axios
.get("/apicc/v1/mergeChunk", {
params: {
fileName: _this.fileName,
hash: _this.hash
}
}, {
headers: {
Content-Type: application/json;charset=UTF-8,
// Content-Type: application/x-www-form-urlencoded,
})
.then((res) = {
res = res.data;
console.log(res, "result124");
if (res.code == 200) {
if (res.data res.data.fileUrl) {
this.callback(this, this.file, "http://"+document.domain+":7002" + res.data.fileUrl);
} else {
this.err({
"msg": "合并不成功"
})
}
} else {
// this.isFail = true;
this.err({
"msg": res.msg
})
}
})
.catch((XMLHttpRequest, textStatus, errorThrown) = {
this.$message.error(网络报错);
});
* [progress 上传进度]
* @param {Function} callback [回调]
* @return {[type]} [实例]
*/
progress: function (callback) {
this.percent = callback;
return this;
},
/**
* [success 上传成功]
* @param {Function} callback [回调]
* @return {[type]} [实例]
*/
success: function (callback) {
this.callback = callback;
return this;
},
/**
* [success 上传失败]
* @param {Function} callback [回调]
* @return {[type]} [实例]
*/
fail: function (callback) {
this.err = callback;
return this;
}
以上就是大文件切片上传到服务器（大文件切片上传到服务器上）的详细内容，想要了解更多 大文件切片上传到服务器的内容，请持续关注盛行IT软件开发工作室。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。