| | |
| | | }) |
| | | } |
| | | |
| | | shardupload = (params) => { |
| | | let param = params.chunks.shift() |
| | | shardupload = (param) => { |
| | | let form = new FormData() |
| | | |
| | | form.append('file', param.binary) |
| | | form.append('fileMd5', params.file.fileMd5) |
| | | form.append('shardingMd5', param.chunkMd5) |
| | | form.append('fileMd5', param.fileMd5) |
| | | form.append('shardingMd5', param.fileMd5) |
| | | form.append('baseDomain', service) |
| | | form.append('rootPath', 'Content/images/upload/') |
| | | form.append('fileName', params.file.fileName) |
| | | form.append('fileExt', params.file.fileType) |
| | | form.append('shardingCnt', param.chunks) |
| | | form.append('shardingNo', param.chunk) |
| | | form.append('fileName', param.fileName) |
| | | form.append('fileExt', param.fileType) |
| | | form.append('shardingCnt', 1) |
| | | form.append('shardingNo', 1) |
| | | form.append('LoginUID', sessionStorage.getItem('LoginUID') || '') |
| | | form.append('UserID', sessionStorage.getItem('UserID') || '') |
| | | |
| | | Api.getLargeFileUpload(form).then(res => { |
| | | if (res.status) { |
| | | if (params.chunks.length > 0) { |
| | | this.setState({ |
| | | percent: Math.floor(100 * (param.chunk / param.chunks)) |
| | | }) |
| | | this.shardupload(params) |
| | | if (res.urlPath) { |
| | | this.onUpdate(res.urlPath) |
| | | } else { |
| | | if (res.urlPath) { |
| | | this.onUpdate(res.urlPath) |
| | | } else { |
| | | this.onFail() |
| | | } |
| | | this.setState({ |
| | | percent: 100 |
| | | }, () => { |
| | | setTimeout(() => { |
| | | this.setState({ |
| | | showprogress: false, |
| | | percent: 0 |
| | | }) |
| | | }, 200) |
| | | }) |
| | | this.onFail() |
| | | } |
| | | this.setState({ |
| | | percent: 100 |
| | | }, () => { |
| | | setTimeout(() => { |
| | | this.setState({ |
| | | showprogress: false, |
| | | percent: 0 |
| | | }) |
| | | }, 200) |
| | | }) |
| | | } else { |
| | | this.onFail(res.message) |
| | | } |
| | |
| | | } |
| | | |
| | | // 兼容性的处理 |
| | | let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice |
| | | let chunkSize = 1024 * 1024 * 2 // 切片每次2M |
| | | let chunks = Math.ceil(file.size / chunkSize) // 切片总数 |
| | | let currentChunk = 0 // 当前上传的chunk |
| | | let spark = new SparkMD5.ArrayBuffer() // 对arrayBuffer数据进行md5加密,产生一个md5字符串 |
| | | let chunkFileReader = new FileReader() // 用于计算出每个chunkMd5 |
| | | let totalFileReader = new FileReader() // 用于计算出总文件的fileMd5 |
| | | let params = {chunks: [], file: {}} // 用于上传所有分片的md5信息 |
| | | let param = {} |
| | | |
| | | params.file.fileName = file.name.replace(/\.{1}[^.]*$/ig, '') // 文件名(去除后缀名) |
| | | params.file.fileType = file.name.replace(/^.*\.{1}/ig, '') // 文件类型 |
| | | params.file.fileSize = file.size // 文件大小 |
| | | params.file.fileChunks = chunks // 记录所有chunks的长度 |
| | | param.fileName = file.name.replace(/\.{1}[^.]*$/ig, '') // 文件名(去除后缀名) |
| | | param.fileType = file.name.replace(/^.*\.{1}/ig, '') // 文件类型 |
| | | |
| | | if (!/^[A-Za-z0-9]+$/.test(params.file.fileName)) { // 文件名称含有英文及数字之外字符时,名称系统生成 |
| | | params.file.fileName = moment().format('YYYYMMDDHHmmss') + this.getuuid() |
| | | if (!/^[A-Za-z0-9]+$/.test(param.fileName)) { // 文件名称含有英文及数字之外字符时,名称系统生成 |
| | | param.fileName = moment().format('YYYYMMDDHHmmss') + this.getuuid() |
| | | } |
| | | |
| | | totalFileReader.readAsArrayBuffer(file) |
| | | totalFileReader.onload = (e) => { // 对整个totalFile生成md5 |
| | | spark.append(e.target.result) |
| | | params.file.fileMd5 = spark.end() // 计算整个文件的fileMd5 |
| | | param.fileMd5 = spark.end() // 计算整个文件的fileMd5 |
| | | param.binary = file |
| | | |
| | | let _param = new FormData() |
| | | _param.append('fileMd5', params.file.fileMd5) |
| | | _param.append('fileMd5', param.fileMd5) |
| | | |
| | | Api.getFilePreUpload(_param).then(res => { |
| | | if (res.status && res.urlPath) { |
| | |
| | | }) |
| | | }, 200) |
| | | }) |
| | | } else if (res.shardings && res.shardings.length > 0) { |
| | | res.shardings.forEach(shard => { |
| | | if (shard.shardingNo && parseInt(shard.shardingNo) > currentChunk) { |
| | | currentChunk = parseInt(shard.shardingNo) |
| | | } |
| | | }) |
| | | loadNext() |
| | | } else { |
| | | loadNext() |
| | | this.shardupload(param) |
| | | } |
| | | }) |
| | | } |
| | | |
| | | chunkFileReader.onload = (e) => { |
| | | spark.append(e.target.result) // 对每一片分片进行md5加密 |
| | | |
| | | params.chunks[params.chunks.length - 1].chunkMd5 = spark.end() // 添加切片md5 |
| | | |
| | | currentChunk++ // 每一次分片onload,currentChunk都需要增加,以便来计算分片的次数 |
| | | |
| | | if (currentChunk < chunks) { // 当前切片总数没有达到总数时 |
| | | loadNext() |
| | | } else { |
| | | this.shardupload(params) |
| | | } |
| | | } |
| | | |
| | | chunkFileReader.onerror = () => { |
| | | this.onFail('文件读取失败!') |
| | | } |
| | | totalFileReader.onerror = () => { |
| | | this.onFail('文件读取失败!') |
| | | } |
| | | |
| | | let loadNext = () => { |
| | | let start = currentChunk * chunkSize // 计算分片的起始位置 |
| | | let end = Math.min(file.size, start + chunkSize) // 计算分片的结束位置 |
| | | |
| | | let obj = { // 每一个分片需要包含的信息 |
| | | chunk: currentChunk + 1, |
| | | binary: file.slice(start, end), |
| | | start: start, |
| | | end: end, |
| | | chunks |
| | | } |
| | | |
| | | params.chunks.push(obj) |
| | | chunkFileReader.readAsArrayBuffer(blobSlice.call(file, start, end)) |
| | | } |
| | | |
| | | return false |