分片上传就是把一个大的文件分成若干块，一块一块的传输。这样做的好处可以减少重新上传的开销。比如：如果我们上传的文件是一个很大的文件，那么上传的时间应该会比较久，再加上网络不稳定各种因素的影响，很容易导致传输中断，用户除了重新上传文件外没有其他的办法，但是我们可以使用分片上传来解决这个问题。通过分片上传技术，如果网络传输中断，我们重新选择文件只需要传剩余的分片。而不需要重传整个文件，大大减少了重传的开销。
但是我们要如何选择一个合适的分片呢？因此我们要考虑如下几个事情：
1.分片越小，那么请求肯定越多，开销就越大。因此不能设置太小。
2.分片越大，灵活度就少了。
3.服务器端都会有个固定大小的接收Buffer。分片的大小最好是这个值的整数倍。
1.先对文件进行md5加密。使用md5加密的优点是：可以对文件进行唯一标识，同样可以为后台进行文件完整性校验进行比对。
2.拿到md5值以后，服务器端查询下该文件是否已经上传过，如果已经上传过的话，就不用重新再上传。
3.对大文件进行分片。比如一个100M的文件，我们一个分片是5M的话，那么这个文件可以分20次上传。
4.向后台请求接口，接口里的数据就是我们已经上传过的文件块。(注意：为什么要发这个请求？就是为了能断点续传，比如我们使用百度网盘对吧，网盘里面有续传功能，当一个文件传到一半的时候，突然想下班不想上传了，那么服务器就应该记住我之前上传过的文件块，当我打开电脑重新上传的时候，那么它应该跳过我之前已经上传的文件块。再上传后续的块)。
5.开始对未上传过的文件块进行上传。(这个是第二个请求，会把所有的分片合并，然后上传请求)。
6.上传成功后，服务器会进行文件合并。最后完成。
<template>
<div>
<!-- on-preview 点击文件列表中已上传的文件时的钩子 -->
<!-- http-request 覆盖默认的上传行为，可以自定义上传的实现 -->
<!-- limit 最大允许上传个数 -->
<!-- before-upload 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。 -->
<!-- accept 接受上传的文件类型（thumbnail-mode 模式下此参数无效） -->
<!-- multiple 是否支持多选文件 -->
<!-- on-change 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 -->
<!-- on-remove 文件列表移除文件时的钩子 -->
<!-- file-list 上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] -->
<!-- on-exceed 文件超出个数限制时的钩子 -->
<!-- auto-upload 是否在选取文件后立即进行上传 -->
<!-- action 必选参数，上传的地址 例如 action="https://jsonplaceholder.typicode.com/posts/"-->
<el-upload
drag
multiple
:auto-upload="true"
:http-request="checkedFile"
:before-remove="removeFile"
:limit="10"
action="/tools/upload_test/"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处，或
<em>点击上传</em>
</div>
</el-upload>
<el-progress type="circle" :percentage="progress" class="progress" v-if="showProgress"></el-progress>
</div>
</template>文件上传时，会走http-request方法，如果定义了这个方法，组件的submit方法就会被拦截掉（注意别在这个方法里面调用组件的submit 方法，会造成死循环），在这个方法里面我就可以搞我想搞的事情了。
http-request 这个传入的回调函数应该返回一个Promise，所以我自己定义了一个无用的Promise进去
const prom = new Promise((resolve, reject) => {})
prom.abort = () => {}
return prom我这里的方案是，在我把所有的分片全部上传一遍后，会请求一个查询接口，后端在这个接口里面返回给我哪些分片没有上传成功（会给我序号），我这个时候，再去重新上传那些没有被上传成功的分片
<template>
<div>
<!-- on-preview 点击文件列表中已上传的文件时的钩子 -->
<!-- http-request 覆盖默认的上传行为，可以自定义上传的实现 -->
<!-- limit 最大允许上传个数 -->
<!-- before-upload 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。 -->
<!-- accept 接受上传的文件类型（thumbnail-mode 模式下此参数无效） -->
<!-- multiple 是否支持多选文件 -->
<!-- on-change 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 -->
<!-- on-remove 文件列表移除文件时的钩子 -->
<!-- file-list 上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] -->
<!-- on-exceed 文件超出个数限制时的钩子 -->
<!-- auto-upload 是否在选取文件后立即进行上传 -->
<!-- action 必选参数，上传的地址 例如 action="https://jsonplaceholder.typicode.com/posts/"-->
<el-upload
drag
multiple
:auto-upload="true"
:http-request="checkedFile"
:before-remove="removeFile"
:limit="10"
action="/tools/upload_test/"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处，或
<em>点击上传</em>
</div>
</el-upload>
<el-progress type="circle" :percentage="progress" class="progress" v-if="showProgress"></el-progress>
</div>
</template>
<script>
import axios from "axios";
import SparkMD5 from "spark-md5";
export default {
data() {
return {
maxSize: 5 * 1024 * 1024 * 1024, // 上传最大文件限制 最小单位是b
multiUploadSize: 100 * 1024 * 1024, // 大于这个大小的文件使用分块上传(后端可以支持断点续传) 100mb
eachSize: 100 * 1024 * 1024, // 每块文件大小 100mb
requestCancelQueue: [], // 请求方法队列（调用取消上传
url: "/tools/upload_test/",
//上传进度
progress: 0,
showProgress: false,
// 每上传一块的进度
eachProgress: 0,
// 总共有多少块。断点续传使用
chunksKeep:0,
// 切割后的文件数组
fileChunksKeep:[],
// 这个文件，断点续传
fileKeep:null
};
},
mounted() {
},
methods: {
async checkedFile(options) {
console.log(options);
const {
maxSize,
multiUploadSize,
getSize,
splitUpload,
singleUpload
} = this; // 解构赋值
const { file, onProgress, onSuccess, onError } = options; // 解构赋值
if (file.size > maxSize) {
return this.$message({
message: `您选择的文件大于${getSize(maxSize)}`,
type: "error"
});
}
this.fileKeep = file
const uploadFunc =
file.size > multiUploadSize ? splitUpload : singleUpload; // 选择上传方式
try {
await uploadFunc(file, onProgress);
this.$message({
message: "上传成功",
type: "success"
});
this.showProgress = false;
this.progress = 0;
onSuccess();
} catch (e) {
console.error(e);
this.$message({
message: e.message,
type: "error"
});
this.showProgress = false;
this.progress = 0;
onError();
}
const prom = new Promise((resolve, reject) => {}); // 上传后返回一个promise
prom.abort = () => {};
return prom;
},
// 格式化文件大小显示文字
getSize(size) {
return size > 1024
? size / 1024 > 1024
? size / (1024 * 1024) > 1024
? (size / (1024 * 1024 * 1024)).toFixed(2) + "GB"
: (size / (1024 * 1024)).toFixed(2) + "MB"
: (size / 1024).toFixed(2) + "KB"
: size.toFixed(2) + "B";
},
// 单文件直接上传
async singleUpload(file, onProgress) {
await this.postFile(
{ file, uid: file.uid, fileName: file.fileName ,chunk:0},
onProgress
);
var spark = new SparkMD5.ArrayBuffer();
spark.append(file);
var md5 = spark.end();
console.log(md5);
const isValidate = await this.validateFile({
fileName: file.name,
uid: file.uid,
md5:md5,
chunks:1
});
},
// 大文件分块上传
splitUpload(file, onProgress) {
console.log('file11')
console.log(file)
return new Promise(async (resolve, reject) => {
try {
const { eachSize } = this;
const chunks = Math.ceil(file.size / eachSize);
this.chunksKeep = chunks
const fileChunks = await this.splitFile(file, eachSize, chunks);
this.fileChunksKeep = fileChunks
console.log('fileChunks,文件数组切割后')
console.log(fileChunks)
//判断每上传一个文件，进度条涨多少,保留两位小数
this.eachProgress = parseInt(Math.floor(100 / chunks * 100) / 100);
this.showProgress = true;
let currentChunk = 0;
for (let i = 0; i < fileChunks.length; i++) {
// 服务端检测已经上传到第currentChunk块了，那就直接跳到第currentChunk块，实现断点续传
console.log(currentChunk, i);
// 此时需要判断进度条
if (Number(currentChunk) === i) {
// 每块上传完后则返回需要提交的下一块的index
await this.postFile(
{
chunked: true,
chunk: i,
chunks,
eachSize,
fileName: file.name,
fullSize: file.size,
uid: file.uid,
file: fileChunks[i]
},
onProgress
);
currentChunk++
// 上传完一块后，进度条增加
this.progress += this.eachProgress;
// 不能超过100
this.progress = this.progress > 100 ? 100 : this.progress;
}
}
var spark = new SparkMD5.ArrayBuffer();
spark.append(file);
var md5 = spark.end();
console.log(md5);
const isValidate = await this.validateFile({
chunks: fileChunks.length,
// chunk: fileChunks.length,
fileName: file.name,
uid: file.uid,
md5:md5,
// task_id:file.uid
});
// if (!isValidate) {
// throw new Error("文件校验异常");
// }
resolve();
} catch (e) {
reject(e);
}
});
},
againSplitUpload(file, array) {
console.log('file,array')
console.log(file)
console.log(array)
return new Promise(async (resolve, reject) => {
try {
const { eachSize , fileKeep } = this;
const chunks = this.chunksKeep
const fileChunks = this.fileChunksKeep
this.showProgress = true;
// let currentChunk = 0;
for (let i = 0; i < array.length; i++) {
// 服务端检测已经上传到第currentChunk块了，那就直接跳到第currentChunk块，实现断点续传
// console.log(currentChunk, i);
// 此时需要判断进度条
// 每块上传完后则返回需要提交的下一块的index
await this.postFile(
{
chunked: true,
chunk: array[i],
chunks,
fileName: file.fileName,
fullSize: fileKeep.size,
uid: file.uid,
file: fileChunks[array[i]]
},
);
// currentChunk++
// 上传完一块后，进度条增加
// this.progress += this.eachProgress;
// 不能超过100
this.progress = this.progress > 100 ? 100 : this.progress;
}
var spark = new SparkMD5.ArrayBuffer();
spark.append(fileKeep);
var md5 = spark.end();
console.log(md5);
const isValidate = await this.validateFile({
chunks: fileChunks.length,
// chunk: fileChunks.length,
fileName: file.fileName,
uid: file.uid,
md5:md5,
// task_id:file.uid
});
// if (!isValidate) {
// throw new Error("文件校验异常");
// }
resolve();
} catch (e) {
reject(e);
}
});
},
// 文件分块,利用Array.prototype.slice方法
splitFile(file, eachSize, chunks) {
return new Promise((resolve, reject) => {
try {
setTimeout(() => {
const fileChunk = [];
for (let chunk = 0; chunks > 0; chunks--) {
fileChunk.push(file.slice(chunk, chunk + eachSize));
chunk += eachSize;
}
resolve(fileChunk);
}, 0);
} catch (e) {
console.error(e);
reject(new Error("文件切块发生错误"));
}
});
},
removeFile(file) {
this.requestCancelQueue[file.uid]();
delete this.requestCancelQueue[file.uid];
return true;
},
// 提交文件方法,将参数转换为FormData, 然后通过axios发起请求
postFile(param, onProgress) {
console.log(param);
const formData = new FormData();
// for (let p in param) {
// formData.append(p, param[p]);
// }
formData.append('file', param.file) // 改了
formData.append('uid',param.uid)
formData.append('chunk',param.chunk)
const { requestCancelQueue } = this;
const config = {
cancelToken: new axios.CancelToken(function executor(cancel) {
if (requestCancelQueue[param.uid]) {
requestCancelQueue[param.uid]();
delete requestCancelQueue[param.uid];
}
requestCancelQueue[param.uid] = cancel;
}),
onUploadProgress: e => {
if (param.chunked) {
e.percent = Number(
(
((param.chunk * (param.eachSize - 1) + e.loaded) /
param.fullSize) *
100
).toFixed(2)
);
} else {
e.percent = Number(((e.loaded / e.total) * 100).toFixed(2));
}
onProgress(e);
}
};
// return axios.post('/api/v1/tools/upload_test/', formData, config).then(rs => rs.data)
return this.$http({
url: "/tools/upload_test/",
method: "POST",
data: formData
// config
}).then(rs => rs.data);
},
// 文件校验方法
validateFile(file) {
// return axios.post('/api/v1/tools/upload_test/', file).then(rs => rs.data)
console.log(2)
console.log(file)
return this.$http({
url: "/tools/upload_test/upload_success/",
method: "POST",
data: file
}).then(res => {
if(res && res.status == 1){
this.againSplitUpload(file,res.data.error_file)
return true
}
});
}
}
};
</script>
<style scoped>
.progress{
/* 在当前页面居中 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* 宽度 */
}
</style>更新代码，上面的代码使用md5加密后，与后端加密的MD5值不一样，下面的加密过后是一样的
<template>
<div :class="showProgress == true ? 'loading' : ''">
<!-- on-preview 点击文件列表中已上传的文件时的钩子 -->
<!-- http-request 覆盖默认的上传行为，可以自定义上传的实现 -->
<!-- limit 最大允许上传个数 -->
<!-- before-upload 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。 -->
<!-- accept 接受上传的文件类型（thumbnail-mode 模式下此参数无效） -->
<!-- multiple 是否支持多选文件 -->
<!-- on-change 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 -->
<!-- on-remove 文件列表移除文件时的钩子 -->
<!-- file-list 上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}] -->
<!-- on-exceed 文件超出个数限制时的钩子 -->
<!-- auto-upload 是否在选取文件后立即进行上传 -->
<!-- action 必选参数，上传的地址 例如 action="https://jsonplaceholder.typicode.com/posts/"-->
<el-upload drag multiple :auto-upload="true" :http-request="checkedFile" :before-remove="removeFile" :limit="10"
action="/tools/upload_chunk/" :disabled="showProgress">
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处，或
<em>点击上传</em>
</div>
</el-upload>
<!-- 正在上传的弹窗 -->
<el-dialog title="正在上传" :visible.sync="showProgress" width="50%">
<el-progress type="circle" :percentage="progress" class="progress" v-if="showProgress"></el-progress>
</el-dialog>
<!-- <el-progress type="circle" :percentage="progress" class="progress" v-if="showProgress"></el-progress> -->
</div>
</template>
<script>
import axios from "axios";
import SparkMD5 from "spark-md5";
export default {
data() {
return {
maxSize: 5 * 1024 * 1024 * 1024, // 上传最大文件限制 最小单位是b
multiUploadSize: 100 * 1024 * 1024, // 大于这个大小的文件使用分块上传(后端可以支持断点续传) 100mb
eachSize: 100 * 1024 * 1024, // 每块文件大小 100mb
requestCancelQueue: [], // 请求方法队列（调用取消上传
url: "/tools/upload_chunk/",
//上传进度
progress: 0,
showProgress: false,
// 每上传一块的进度
eachProgress: 0,
// 总共有多少块。断点续传使用
chunksKeep: 0,
// 切割后的文件数组
fileChunksKeep: [],
// 这个文件，断点续传
fileKeep: null,
// 断点续传，文件md5
fileMd5Keep: ""
};
},
mounted() { },
methods: {
async checkedFile(options) {
// console.log(options);
const {
maxSize,
multiUploadSize,
getSize,
splitUpload,
singleUpload
} = this; // 解构赋值
const { file, onProgress, onSuccess, onError } = options; // 解构赋值
if (file.size > maxSize) {
return this.$message({
message: `您选择的文件大于${getSize(maxSize)}`,
type: "error"
});
}
this.fileKeep = file;
const uploadFunc =
file.size > multiUploadSize ? splitUpload : singleUpload; // 选择上传方式
try {
await uploadFunc(file, onProgress);
onSuccess();
} catch (e) {
console.error(e);
this.$message({
message: e.message,
type: "error"
});
this.showProgress = false;
this.progress = 0;
onError();
}
const prom = new Promise((resolve, reject) => { }); // 上传后返回一个promise
prom.abort = () => { };
return prom;
},
// 格式化文件大小显示文字
getSize(size) {
return size > 1024
? size / 1024 > 1024
? size / (1024 * 1024) > 1024
? (size / (1024 * 1024 * 1024)).toFixed(2) + "GB"
: (size / (1024 * 1024)).toFixed(2) + "MB"
: (size / 1024).toFixed(2) + "KB"
: size.toFixed(2) + "B";
},
// 单文件直接上传
async singleUpload(file, onProgress) {
await this.postFile(
{ file, uid: file.uid, fileName: file.fileName, chunk: 0 },
onProgress
);
// var spark = new SparkMD5.ArrayBuffer();
// spark.append(file);
// var md5 = spark.end();
// console.log(md5);
const reader = new FileReader();
reader.readAsArrayBuffer(file);
let hashMd5 = "";
console.log(hashMd5);
const that = this;
function getHash(cb) {
console.log("进入单个上传的getHash");
reader.onload = function (e) {
console.log("进入单个上传的getHash的函数2");
console.log(hashMd5);
console.log(this);
// console.log(e)
const hash = SparkMD5.ArrayBuffer.hash(e.target.result);
// const hash = SparkMD5.ArrayBuffer.hash(file);
console.log(hash);
that.hashMd5 = hash;
console.log(that.hashMd5);
that.fileMd5Keep = hash;
cb(hash);
};
}
await getHash(function (hash) {
console.log(hash);
console.log(that);
// 请求接口
that.validateFile({
name: file.name,
uid: file.uid,
md5: hash,
chunks: 1,
filter_type: "user_data_file"
});
});
},
// getMd5(file, chunkCount) {
// const spark = new SparkMD5.ArrayBuffer();
// let currentChunk = 0;
// const reader = new FileReader();
// reader.onload = function(e) {
// spark.append(e.target.result);
// currentChunk++;
// if (currentChunk < chunkCount) {
// console.log(currentChunk);
// loadNext();
// } else {
// console.log(spark.end());
// // 在这里请求接口
// return spark.end();
// }
// };
// function loadNext() {
// const start = currentChunk * chunkSize;
// const end =
// start + chunkSize >= file.size ? file.size : start + chunkSize;
// reader.readAsArrayBuffer(file.slice(start, end));
// }
// loadNext();
// },
// 大文件分块上传
splitUpload(file, onProgress) {
return new Promise(async (resolve, reject) => {
try {
const { eachSize } = this;
const chunks = Math.ceil(file.size / eachSize);
this.chunksKeep = chunks;
const fileChunks = await this.splitFile(file, eachSize, chunks);
this.fileChunksKeep = fileChunks;
console.log("fileChunks,文件数组切割后");
console.log(fileChunks);
//判断每上传一个文件，进度条涨多少,保留两位小数
this.eachProgress = parseInt(Math.floor((100 / chunks) * 100) / 100);
this.showProgress = true;
let currentChunk = 0;
for (let i = 0; i < fileChunks.length; i++) {
// 服务端检测已经上传到第currentChunk块了，那就直接跳到第currentChunk块，实现断点续传
console.log(currentChunk, i);
// 此时需要判断进度条
if (Number(currentChunk) === i) {
// 每块上传完后则返回需要提交的下一块的index
await this.postFile(
{
chunked: true,
chunk: i,
chunks,
eachSize,
fileName: file.name,
fullSize: file.size,
uid: file.uid,
file: fileChunks[i]
},
onProgress
);
currentChunk++;
// 上传完一块后，进度条增加
this.progress += this.eachProgress;
// 不能超过100
this.progress = this.progress > 100 ? 100 : this.progress;
}
}
// this.getMd5(file, chunks);
// var spark = new SparkMD5.ArrayBuffer();
// spark.append(file);
// var md5 = spark.end();
// console.log(md5);
const spark = new SparkMD5.ArrayBuffer();
let currentChunkMd5 = 0;
const that = this;
const reader = new FileReader();
reader.onload = async function (e) {
spark.append(e.target.result);
currentChunkMd5++;
if (currentChunkMd5 < chunks) {
loadNext();
} else {
// console.log(spark.end());
var hashMd5111 = spark.end();
that.fileMd5Keep = hashMd5111;
console.log(that);
console.log(hashMd5111);
// 在这里请求接口
await that.validateFile({
name: file.name,
uid: file.uid,
md5: hashMd5111,
chunks: fileChunks.length,
filter_type: "git_secret_file"
// chunk: fileChunks.length,
});
}
};
async function loadNext() {
const start = currentChunkMd5 * eachSize;
const end =
start + eachSize >= file.size ? file.size : start + eachSize;
await reader.readAsArrayBuffer(file.slice(start, end));
}
this.$message({
message: "正在进行文件加密校验",
type: "info"
});
await loadNext();
// let hashMd5 = "";
// // console.log(hashMd5)
// const that = this;
// console.log("进入分片上传的getHash");
// function getHash(cb) {
// reader.onload = function(e) {
// console.log("进入分片上传的getHash的函数");
// const hash = SparkMD5.ArrayBuffer.hash(e.target.result);
// // const hash = SparkMD5.ArrayBuffer.hash(file);
// console.log(hash);
// that.hashMd5 = hash;
// console.log(that.hashMd5);
// that.fileMd5Keep = hash;
// cb(hash);
// };
// reader.readAsArrayBuffer(file);
// }
// await getHash(function() {
// console.log(that);
// that.validateFile({
// name: file.name,
// uid: file.uid,
// md5: that.hashMd5,
// chunks: fileChunks.length
// // chunk: fileChunks.length,
// });
// });
// 请求接口
// console.log('fileChunks.length')
// 请求接口
// this.validateFile({
// fileName: file.name,
// uid: file.uid,
// md5:md5,
// chunks:1
// });
resolve();
} catch (error) {
reject(error);
}
});
},
// 断点续传
againSplitUpload(file, array) {
console.log("file,array");
console.log(file);
console.log(array);
return new Promise(async (resolve, reject) => {
try {
const { eachSize, fileKeep } = this;
const chunks = this.chunksKeep;
const fileChunks = this.fileChunksKeep;
this.showProgress = true;
// let currentChunk = 0;
for (let i = 0; i < array.length; i++) {
// 服务端检测已经上传到第currentChunk块了，那就直接跳到第currentChunk块，实现断点续传
// console.log(currentChunk, i);
// 此时需要判断进度条
// 每块上传完后则返回需要提交的下一块的index
await this.postFile({
chunked: true,
chunk: array[i],
chunks,
name: file.name,
fullSize: fileKeep.size,
uid: file.uid,
file: fileChunks[array[i]]
});
// currentChunk++
// 上传完一块后，进度条增加
// this.progress += this.eachProgress;
// 不能超过100
this.progress = this.progress > 100 ? 100 : this.progress;
}
// var spark = new SparkMD5.ArrayBuffer();
// spark.append(fileKeep);
// var md5 = spark.end();
// console.log(md5);
var fileMd5KeepTwo = this.fileMd5Keep;
const isValidate = await this.validateFile({
chunks: fileChunks.length,
// chunk: fileChunks.length,
name: file.name,
uid: file.uid,
md5: fileMd5KeepTwo,
filter_type: "git_secret_file"
// task_id:file.uid
});
// if (!isValidate) {
// throw new Error("文件校验异常");
// }
// 关闭进度条
this.showProgress = false;
// 重置进度条
this.progress = 0;
resolve();
} catch (e) {
reject(e);
}
});
},
// 文件分块,利用Array.prototype.slice方法
splitFile(file, eachSize, chunks) {
return new Promise((resolve, reject) => {
try {
setTimeout(() => {
const fileChunk = [];
for (let chunk = 0; chunks > 0; chunks--) {
fileChunk.push(file.slice(chunk, chunk + eachSize));
chunk += eachSize;
}
resolve(fileChunk);
}, 0);
} catch (e) {
console.error(e);
reject(new Error("文件切块发生错误"));
}
});
},
removeFile(file) {
this.requestCancelQueue[file.uid]();
delete this.requestCancelQueue[file.uid];
return true;
},
// 提交文件方法,将参数转换为FormData, 然后通过axios发起请求
postFile(param, onProgress) {
// console.log(param);
const formData = new FormData();
// for (let p in param) {
// formData.append(p, param[p]);
// }
formData.append("file", param.file); // 改了
formData.append("uid", param.uid);
formData.append("chunk", param.chunk);
formData.append("filter_type", "git_secret_file");
const { requestCancelQueue } = this;
const config = {
cancelToken: new axios.CancelToken(function executor(cancel) {
if (requestCancelQueue[param.uid]) {
requestCancelQueue[param.uid]();
delete requestCancelQueue[param.uid];
}
requestCancelQueue[param.uid] = cancel;
}),
onUploadProgress: e => {
if (param.chunked) {
e.percent = Number(
(
((param.chunk * (param.eachSize - 1) + e.loaded) /
param.fullSize) *
100
).toFixed(2)
);
} else {
e.percent = Number(((e.loaded / e.total) * 100).toFixed(2));
}
onProgress(e);
}
};
// return axios.post('/api/v1/tools/upload_chunk/', formData, config).then(rs => rs.data)
return this.$http({
url: "/tools/upload_chunk/",
method: "POST",
data: formData
// config
}).then(rs => rs.data);
},
// 文件校验方法
validateFile(file) {
// return axios.post('/api/v1/tools/upload_chunk/', file).then(rs => rs.data)
return this.$http({
url: "/tools/upload_chunk/upload_success/",
method: "POST",
data: file
}).then(res => {
if (res && res.status == 1) {
this.againSplitUpload(file, res.data.error_file);
this.$message({
message: "有文件上传失败，正在重新上传",
type: "warning"
});
} else if (res && res.status == 0) {
this.$message({
message: "上传成功",
type: "success"
});
this.showProgress = false;
this.progress = 0;
} else if (res && res.status == 40008) {
this.$message.error(res.message);
this.showProgress = false;
this.progress = 0;
}
});
}
}
};
</script>
<style scoped>
.loading {
/* 整体页面置灰 */
/* background: rgba(0, 0, 0, 0.5); */
}
.progress {
/* 在当前页面居中 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-top: 40px;
/* 宽度 */
}
/deep/ .el-dialog {
position: relative;
height: 500px;
}
</style>
我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？ 最佳答案 这是我通过查看rubyzip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d
我试图在一个项目中使用rake，如果我把所有东西都放到Rakefile中，它会很大并且很难读取/找到东西，所以我试着将每个命名空间放在lib/rake中它自己的文件中，我添加了这个到我的rake文件的顶部:Dir['#{File.dirname(__FILE__)}/lib/rake/*.rake'].map{|f|requiref}它加载文件没问题，但没有任务。我现在只有一个.rake文件作为测试，名为“servers.rake”，它看起来像这样:namespace:serverdotask:testdoputs"test"endend所以当我运行rakeserver:testid时
我的目标是转换表单输入，例如“100兆字节”或“1GB”，并将其转换为我可以存储在数据库中的文件大小(以千字节为单位)。目前，我有这个:defquota_convert@regex=/([0-9]+)(.*)s/@sizes=%w{kilobytemegabytegigabyte}m=self.quota.match(@regex)if@sizes.include?m[2]eval("self.quota=#{m[1]}.#{m[2]}")endend这有效，但前提是输入是倍数(“gigabytes”，而不是“gigabyte”)并且由于使用了eval看起来疯狂不安全。所以，功能正常，
Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情？ 最佳答案 在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中，使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件，我们在StackOverflow上找到一个类似的问题
对于具有离线功能的智能手机应用程序，我正在为Xml文件创建单向文本同步。我希望我的服务器将增量/差异(例如GNU差异补丁)发送到目标设备。这是计划:Time=0Server:hasversion_1ofXmlfile(~800kiB)Client:hasversion_1ofXmlfile(~800kiB)Time=1Server:hasversion_1andversion_2ofXmlfile(each~800kiB)computesdeltaoftheseversions(=patch)(~10kiB)sendspatchtoClient(~10kiBtransferred)Cl
我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚
我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%
使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta
好的，所以我的目标是轻松地将一些数据保存到磁盘以备后用。您如何简单地写入然后读取一个对象？所以如果我有一个简单的类classCattr_accessor:a,:bdefinitialize(a,b)@a,@b=a,bendend所以如果我从中非常快地制作一个objobj=C.new("foo","bar")#justgaveitsomerandomvalues然后我可以把它变成一个kindaidstring=obj.to_s#whichreturns""我终于可以将此字符串打印到文件或其他内容中。我的问题是，我该如何再次将这个id变回一个对象？我知道我可以自己挑选信息并制作一个接受该信
我正在编写一个小脚本来定位aws存储桶中的特定文件，并创建一个临时验证的url以发送给同事。(理想情况下，这将创建类似于在控制台上右键单击存储桶中的文件并复制链接地址的结果)。我研究过回形针，它似乎不符合这个标准，但我可能只是不知道它的全部功能。我尝试了以下方法:defauthenticated_url(file_name,bucket)AWS::S3::S3Object.url_for(file_name,bucket,:secure=>true,:expires=>20*60)end产生这种类型的结果:...-1.amazonaws.com/file_path/file.zip.A