_
阅读目录
一：什么是分片上传？
分片上传是把一个大的文件分成若干块，一块一块的传输。这样做的好处可以减少重新上传的开销。比如：
如果我们上传的文件是一个很大的文件，那么上传的时间应该会比较久，再加上网络不稳定各种因素的影响，很容易导致传输中断，用户除了重新上传文件外没有其他的办法，但是我们可以使用分片上传来解决这个问题。通过分片上传技术，如果网络传输中断，我们重新选择文件只需要传剩余的分片。而不需要重传整个文件，大大减少了重传的开销。
如下图是一个大文件分成很多小片段：
但是我们要如何选择一个合适的分片呢？
因此我们要考虑如下几个事情：
1. 分片越小，那么请求肯定越多，开销就越大。因此不能设置太小。
2. 分片越大，灵活度就少了。
3. 服务器端都会有个固定大小的接收Buffer。分片的大小最好是这个值的整数倍。
因此，综合考虑到推荐分片的大小是2M-5M. 具体分片的大小需要根据文件的大小来确定，如果文件太大，建议分片的大小是5M，如果文件相对较小，那么建议分片的大小是2M。
实现文件分片上传的步骤如下：
1. 先对文件进行md5加密。使用md5加密的优点是：可以对文件进行唯一标识，同样可以为后台进行文件完整性校验进行比对。
2. 拿到md5值以后，服务器端查询下该文件是否已经上传过，如果已经上传过的话，就不用重新再上传。
3. 对大文件进行分片。比如一个100M的文件，我们一个分片是5M的话，那么这个文件可以分20次上传。
4. 向后台请求接口，接口里的数据就是我们已经上传过的文件块。(注意：为什么要发这个请求？就是为了能续传，比如我们使用百度网盘对吧，网盘里面有续传功能，当一个文件传到一半的时候，突然想下班不想上传了，那么服务器就应该记住我之前上传过的文件块，当我打开电脑重新上传的时候，那么它应该跳过我之前已经上传的文件块。再上传后续的块)。
5. 开始对未上传过的文件块进行上传。(这个是第二个请求，会把所有的分片合并，然后上传请求)。
6. 上传成功后，服务器会进行文件合并。最后完成。
二：理解Blob对象中的slice方法对文件进行分割及其他知识点
在编写代码之前，我们需要了解一些基本的知识点，然后在了解基础知识点之上，我们再去实践我们的大文件分片上传这么的一个demo。首先我们来看下我们的Blob对象，如下代码所示：
var b = new Blob();
console.log(b);
如下所示：
如上图我们可以看到，我们的Blob对象自身有 size 和 type两个属性，及它的原型上有 slice() 方法。我们可以通过该方法来切割我们的二进制的Blob对象。
2. 学习 blob.slice 方法
blob.slice(startByte, endByte) 是Blob对象中的一个方法，File对象它是继承Blob对象的，因此File对象也有该slice方法的。
参数：
startByte: 表示文件起始读取的Byte字节数。
endByte: 表示结束读取的字节数。
返回值：var b = new Blob(startByte, endByte); 该方法的返回值仍然是一个Blob类型。
我们可以使用 blob.slice() 方法对二进制的Blob对象进行切割，但是该方法也是有浏览器兼容性的，因此我们可以封装一个方法：如下所示：
function blobSlice(blob, startByte, endByte) {
if (blob.slice) {
return blob.slice(startByte, endByte);
}
// 兼容firefox
if (blob.mozSlice) {
return blob.mozSlice(startByte, endByte);
}
// 兼容webkit
if (blob.webkitSlice) {
return blob.webkitSlice(startByte, endByte);
}
return null;
}
3. 理解 async/await 的使用
在我很早之前，我已经对async/await 的使用和优势做了讲解，有兴趣了解该知识点的，可以看我之前这篇文章.
因此我们现在来看下如下demo列子：
const hashFile2 = function(file) {
return new Promise(function(resolve, reject) {
console.log(111);
})
};
window.onload = async() => {
const hash = await hashFile2();
}
如上代码，如果我们直接刷新页面，就可以在控制台中输出 111 这个的字符。为什么我现在要讲解这个呢，因为待会我们的demo会使用到该知识点，所以提前讲解下理解下该知识。
4. 理解 FileReader.readAsArrayBuffer()方法
该方法会按字节读取文件内容，并转换为 ArrayBuffer 对象。readAsArrayBuffer方法读取文件后，会在内存中创建一个 ArrayBuffer对象(二进制缓冲区)，会将二进制数据存放在其中。通过此方式，我们就可以直接在网络中传输二进制内容。
其语法结构：
FileReader.readAsArrayBuffer(Blob|File);
Blob|File 必须参数，参数是Blob或File对象。
如下代码演示：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<title>readAsArrayBuffer测试</title>
</head>
<body>
<input type="file" id="file"/>
<script>
window.onload = function () {
var input = document.getElementById("file");
input.onchange = function () {
var file = this.files[0];
if (file) {
//读取本地文件，以gbk编码方式输出
var reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function () {
console.log(this.result);
console.log(new Blob([this.result]))
}
}
}
}
</script>
</body>
</html>
如果我们现在上传的是文本文件的话，就会打印如下信息，如下所示：
三. 使用 spark-md5 生成 md5文件
了解spark-md5，请看npm官网
下面我们来理解下 上传文件如何来得到 md5 的值。上传文件简单的如下demo, 代码所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>文件上传</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spark-md5/3.0.0/spark-md5.js"></script>
</head>
<body>
<h1>大文件上传测试</h1>
<div>
<h3>自定义上传文件</h3>
<input id="file" type="file" name="avatar"/>
<div>
<input id="submitBtn" type="button" value="提交">
</div>
</div>
<script type="text/javascript">
$(function() {
const submitBtn = $('#submitBtn');
submitBtn.on('click', async () => {
var fileDom = $('#file')[0];
// 获取到的files为一个File对象数组，如果允许多选的时候，文件为多个
const files = fileDom.files;
const file = files[0]; // 获取第一个文件，因为文件是一个数组
if (!file) {
alert('没有获取文件');
return;
}
var fileSize = file.size; // 文件大小
var chunkSize = 2 * 1024 * 1024; // 切片的大小
var chunks = Math.ceil(fileSize / chunkSize); // 获取切片的个数
var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
var spark = new SparkMD5.ArrayBuffer();
var reader = new FileReader();
var currentChunk = 0; reader.onload = function(e) {
const result = e.target.result;
spark.append(result);
currentChunk++;
if (currentChunk < chunks) {
loadNext();
console.log(`第${currentChunk}分片解析完成，开始解析${currentChunk + 1}分片`);
} else {
const md5 = spark.end();
console.log('解析完成');
console.log(md5);
}
};
function loadNext() {
var start = currentChunk * chunkSize;
var end = start + chunkSize > file.size ? file.size : (start + chunkSize);
reader.readAsArrayBuffer(blobSlice.call(file, start, end));
};
loadNext();
});
});
</script>
</body>
</html>
如上代码，首先我在 input type = 'file' 这样的会选择一个文件，然后点击进行上传，先获取文件的大小，然后定义一个分片的大小默认为2兆，使用 var chunks = Math.ceil(fileSize / chunkSize); // 获取切片的个数 方法获取切片的个数。
如果 fileSize(文件大小) 小于 chunkSize(2兆)的话，使用向上取整，因此为1个分片。同理如果除以的结果 是 1.2 这样的，那么就是2个分片了，依次类推.... 然后使用 SparkMD5.ArrayBuffer 方法了，详情可以看官网(http://npm.taobao.org/package/spark-md5). 先初始化当前的 currentChunk 分片为0，然后 reader.onload = function(e) {} 方法，如果当前的分片数量小于 chunks 的数量的话，会继续调用 loadNext()方法，该方法会读取下一个分片，开始的位置计算方式是：var start = currentChunk * chunkSize;
currentChunk 的含义是第二个分片(从0开始的，因此这里它的值为1)，结束的位置 计算方式为：
var end = start + chunkSize > file.size ? file.size : (start + chunkSize);
也就说，如果一个文件的大小是2.1兆的话，一个分片是2兆的话，那么它就最大分片的数量就是2片了，但是 currentChunk 默认从0开始的，因此第二个分片，该值就变成1了，因此 start的位置就是 var start = 1 * 2(兆)了，然后 var end = start + chunkSize > file.size ? file.size : (start + chunkSize);
如果 start + chunkSize 大于 文件的大小(file.size) 的话，那么就直接去 file.size(文件的大小)，否则的话，结束位置就是 start + chunkSize 了。最后我们使用
blobSlice 进行切割，就切割到第二个分片的大小了，blobSlice.call(file, start, end)，这样的方法。然后把切割的文件读取到内存中去，使用 reader.readAsArrayBuffer() 将buffer读取到内存中去了。继续会调用 onload 该方法，直到 进入else 语句内，那么 const md5 = spark.end(); 就生成了一个md5文件了。如上代码，如果我现在上传一个大文件的话，在控制台中就会打印如下信息了：如下图所示：
四. 使用koa+js实现大文件分片上传实践
注：根据网上demo来讲解的
先看下整个项目的架构如下：
|---- 项目根目录
| |--- app.js # node 入口文件
| |--- package.json
| |--- node_modules # 所有依赖的包
| |--- static # 存放静态资源文件目录
| | |--- js
| | | |--- index.js # 文件上传的js
| | |--- index.html
| |--- uploads # 保存上传文件后的目录
| |--- utils # 保存公用的js函数
| | |--- dir.js
static/index.html 文件代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>文件上传</title>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spark-md5/3.0.0/spark-md5.js"></script>
</head>
<body>
<h1>大文件上传测试</h1>
<div>
<h3>自定义上传文件</h3>
<input id="file" type="file" name="avatar"/>
<div>
<input id="submitBtn" type="button" value="提交">
</div>
</div>
<script type="text/javascript" src="./js/index.js"></script>
</body>
</html>
运行页面，效果如下所示：
static/js/index.js 代码如下：
$(document).ready(() => {
const chunkSize = 2 * 1024 * 1024; // 每个chunk的大小，设置为2兆
// 使用Blob.slice方法来对文件进行分割。
// 同时该方法在不同的浏览器使用方式不同。
const blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
const hashFile = (file) => {
return new Promise((resolve, reject) => {
const chunks = Math.ceil(file.size / chunkSize);
let currentChunk = 0;
const spark = new SparkMD5.ArrayBuffer();
const fileReader = new FileReader();
function loadNext() {
const start = currentChunk * chunkSize;
const end = start + chunkSize >= file.size ? file.size : start + chunkSize;
fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
}
fileReader.onload = e => {
spark.append(e.target.result); // Append array buffer
currentChunk += 1;
if (currentChunk < chunks) {
loadNext();
} else {
console.log('finished loading');
const result = spark.end();
// 如果单纯的使用result 作为hash值的时候, 如果文件内容相同，而名称不同的时候
// 想保留两个文件无法保留。所以把文件名称加上。
const sparkMd5 = new SparkMD5();
sparkMd5.append(result);
sparkMd5.append(file.name);
const hexHash = sparkMd5.end();
resolve(hexHash);
}
};
fileReader.onerror = () => {
console.warn('文件读取失败！');
};
loadNext();
}).catch(err => {
console.log(err);
});
}
const submitBtn = $('#submitBtn');
submitBtn.on('click', async () => {
const fileDom = $('#file')[0];
// 获取到的files为一个File对象数组，如果允许多选的时候，文件为多个
const files = fileDom.files;
const file = files[0];
if (!file) {
alert('没有获取文件');
return;
}
const blockCount = Math.ceil(file.size / chunkSize); // 分片总数
const axiosPromiseArray = []; // axiosPromise数组
const hash = await hashFile(file); //文件 hash
// 获取文件hash之后，如果需要做断点续传，可以根据hash值去后台进行校验。
// 看看是否已经上传过该文件，并且是否已经传送完成以及已经上传的切片。
console.log(hash);
for (let i = 0; i < blockCount; i++) {
const start = i * chunkSize;
const end = Math.min(file.size, start + chunkSize);
// 构建表单
const form = new FormData();
form.append('file', blobSlice.call(file, start, end));
form.append('name', file.name);
form.append('total', blockCount);
form.append('index', i);
form.append('size', file.size);
form.append('hash', hash);
// ajax提交 分片，此时 content-type 为 multipart/form-data
const axiosOptions = {
onUploadProgress: e => {
// 处理上传的进度
console.log(blockCount, i, e, file);
},
};
// 加入到 Promise 数组中
axiosPromiseArray.push(axios.post('/file/upload', form, axiosOptions));
}
// 所有分片上传后，请求合并分片文件
await axios.all(axiosPromiseArray).then(() => {
// 合并chunks
const data = {
size: file.size,
name: file.name,
total: blockCount,
hash
};
axios.post('/file/merge_chunks', data).then(res => {
console.log('上传成功');
console.log(res.data, file);
alert('上传成功');
}).catch(err => {
console.log(err);
});
});
});
})
如上代码，和我们上面生成md5代码很类似，从添加到formData下面的代码不一样了，我们可以来简单的分析下，看下代码的具体含义：
const blockCount = Math.ceil(file.size / chunkSize); // 分片总数
上面的代码的含义是获取分片的总数，我们之前讲解过，然后使用 for循环遍历分片，依次把对应的分片添加到 formData数据里面去，如下所示代码：
const axiosPromiseArray = [];
const blockCount = Math.ceil(file.size / chunkSize); // 分片总数 for (let i = 0; i < blockCount; i++) {
const start = i * chunkSize;
const end = Math.min(file.size, start + chunkSize);
// 构建表单
const form = new FormData();
form.append('file', blobSlice.call(file, start, end));
form.append('name', file.name);
form.append('total', blockCount);
form.append('index', i);
form.append('size', file.size);
form.append('hash', hash);
// ajax提交 分片，此时 content-type 为 multipart/form-data
const axiosOptions = {
onUploadProgress: e => {
// 处理上传的进度
console.log(blockCount, i, e, file);
},
};
// 加入到 Promise 数组中
axiosPromiseArray.push(axios.post('/file/upload', form, axiosOptions));
}
// 所有分片上传后，请求合并分片文件
await axios.all(axiosPromiseArray).then(() => {
// 合并chunks
const data = {
size: file.size,
name: file.name,
total: blockCount,
hash
};
axios.post('/file/merge_chunks', data).then(res => {
console.log('上传成功');
console.log(res.data, file);
alert('上传成功');
}).catch(err => {
console.log(err);
});
});
如上代码，循环分片的总数，然后依次实列化formData数据，依次放入到formData实列中，然后分别使用 '/file/upload' 请求数据，最后把所有请求成功的数据放入到 axiosPromiseArray 数组中，当所有的分片上传完成后，我们会使用 await axios.all(axiosPromiseArray).then(() => {}) 方法，最后我们会使用 '/file/merge_chunks' 方法来合并文件。
下面我们来看看 app.js 服务器端的代码，如下所示：
const Koa = require('koa');
const app = new Koa();
const Router = require('koa-router');
const multer = require('koa-multer');
const serve = require('koa-static');
const path = require('path');
const fs = require('fs-extra');
const koaBody = require('koa-body');
const { mkdirsSync } = require('./utils/dir');
const uploadPath = path.join(__dirname, 'uploads');
const uploadTempPath = path.join(uploadPath, 'temp');
const upload = multer({ dest: uploadTempPath });
const router = new Router();
app.use(koaBody());
/**
* single(fieldname)
* Accept a single file with the name fieldname. The single file will be stored in req.file.
*/
router.post('/file/upload', upload.single('file'), async (ctx, next) => {
console.log('file upload...')
// 根据文件hash创建文件夹，把默认上传的文件移动当前hash文件夹下。方便后续文件合并。
const {
name,
total,
index,
size,
hash
} = ctx.req.body;
const chunksPath = path.join(uploadPath, hash, '/');
if(!fs.existsSync(chunksPath)) mkdirsSync(chunksPath);
fs.renameSync(ctx.req.file.path, chunksPath + hash + '-' + index);
ctx.status = 200;
ctx.res.end('Success');
})
router.post('/file/merge_chunks', async (ctx, next) => {
const {
size,
name,
total,
hash
} = ctx.request.body;
// 根据hash值，获取分片文件。
// 创建存储文件
// 合并
const chunksPath = path.join(uploadPath, hash, '/');
const filePath = path.join(uploadPath, name);
// 读取所有的chunks 文件名存放在数组中
const chunks = fs.readdirSync(chunksPath);
// 创建存储文件
fs.writeFileSync(filePath, '');
if(chunks.length !== total || chunks.length === 0) {
ctx.status = 200;
ctx.res.end('切片文件数量不符合');
return;
}
for (let i = 0; i < total; i++) {
// 追加写入到文件中
fs.appendFileSync(filePath, fs.readFileSync(chunksPath + hash + '-' +i));
// 删除本次使用的chunk
fs.unlinkSync(chunksPath + hash + '-' +i);
}
fs.rmdirSync(chunksPath);
// 文件合并成功，可以把文件信息进行入库。
ctx.status = 200;
ctx.res.end('合并成功');
})
app.use(router.routes());
app.use(router.allowedMethods());
app.use(serve(__dirname + '/static'));
app.listen(9000, () => {
console.log('服务9000端口已经启动了');
});
如上代码：分别引入 koa， koa-router, koa-multer, koa-static, path, fs-extra, koa-body 依赖包。
koa-multer 的作用是为了处理上传文件的插件。
utils/dir.js 代码如下(该代码的作用是判断是否有这个目录，有这个目录的话，直接返回true，否则的话，创建该目录)：
const path = require('path');
const fs = require('fs-extra');
const mkdirsSync = (dirname) => {
if(fs.existsSync(dirname)) {
return true;
} else {
if (mkdirsSync(path.dirname(dirname))) {
fs.mkdirSync(dirname);
return true;
}
}
}
module.exports = {
mkdirsSync
};
1. /file/upload 请求代码如下：
router.post('/file/upload', upload.single('file'), async (ctx, next) => {
console.log('file upload...')
// 根据文件hash创建文件夹，把默认上传的文件移动当前hash文件夹下。方便后续文件合并。
const {
name,
total,
index,
size,
hash
} = ctx.req.body;
const chunksPath = path.join(uploadPath, hash, '/');
if(!fs.existsSync(chunksPath)) mkdirsSync(chunksPath);
fs.renameSync(ctx.req.file.path, chunksPath + hash + '-' + index);
ctx.status = 200;
ctx.res.end('Success');
})
如上代码，会处理 '/file/upload' 这个请求，upload.single('file'), 的含义是：接受一个文件名称字段名。
单一文件将存储在req.file中，这是 koa-multer 插件的用法，具体可以看 koa-multer官网(https://www.npmjs.com/package/koa-multer)。 获取到文件后，请求成功回调，然后会在项目中的根目录下创建一个 uploads 这个目录，如下代码可以看到：
const uploadPath = path.join(__dirname, 'uploads');
const chunksPath = path.join(uploadPath, hash, '/');
if(!fs.existsSync(chunksPath)) mkdirsSync(chunksPath);
最后上传完成后，我们可以在我们的项目中可以看到我们所有的文件都在我们本地了，如下所示：
我们也可以在我们的网络中看到如下很多 '/file/upload' 的请求，如下可以看到很多请求，说明我们的请求是分片上传的，如下所示：
2. '/file/merge_chunks'
最后所有的分片请求上传成功后，我们会调用 '/file/merge_chunks' 这个请求来合并所有的文件，根据我们的hash值，来获取文件分片。
如下代码：
// 根据hash值，获取分片文件。
// 创建存储文件
// 合并
const chunksPath = path.join(uploadPath, hash, '/');
const filePath = path.join(uploadPath, name);
// 读取所有的chunks 文件名存放在数组中
const chunks = fs.readdirSync(chunksPath);
// 创建存储文件
fs.writeFileSync(filePath, '');
if(chunks.length !== total || chunks.length === 0) {
ctx.status = 200;
ctx.res.end('切片文件数量不符合');
return;
}
for (let i = 0; i < total; i++) {
// 追加写入到文件中
fs.appendFileSync(filePath, fs.readFileSync(chunksPath + hash + '-' +i));
// 删除本次使用的chunk
fs.unlinkSync(chunksPath + hash + '-' +i);
}
fs.rmdirSync(chunksPath);
// 文件合并成功，可以把文件信息进行入库。
ctx.status = 200;
ctx.res.end('合并成功');
如上代码，会循环分片的总数，然后把所有的分片写入到我们的filePath目录中，如这句代码：
fs.appendFileSync(filePath, fs.readFileSync(chunksPath + hash + '-' +i));
其中 filePath 的获取 是这句代码：const filePath = path.join(uploadPath, name); 也就是说在我们项目的根目录下的uploads文件夹下，这么做的原因是为了防止网络突然断开或服务器突然异常的情况下，文件上传到一半的时候，我们本地会保存一部分已经上传的文件，如果我们继续上传的时候，我们会跳过哪些已经上传后的文件，继续上传未上传的文件。这是为了断点续传做好准备的，下次我会分析下如何实现断点续传的原理了。如果我们把上面这两句代码注释掉，如下所示：
// 删除本次使用的chunk
fs.unlinkSync(chunksPath + hash + '-' +i);
fs.rmdirSync(chunksPath);
我们就可以看到我们项目本地会有 uploads 会有很多分片文件了，如下所示：
当我们这个文件上传完成后，如上代码，我们会把它删除掉，因此如果我们不把该代码注释掉的话，是看不到效果的。
如果我们继续上传另外一个文件后，会在我们项目的根目录下生成第二个文件，如下所示：
如上就是我们整个分片上传的基本原理，我们还没有做断点续传了，下次有空我们来分析下断点续传的基本原理，断点续传的原理，无非就是说在我们上传的过程中，如果网络中断或服务器中断的情况下，我们需要把文件保存到本地，然后当网络恢复的时候，我们继续上传，那么继续上传的时候，我们会比较上传的hash值是否在我本地的hash值是否相同，如果相同的话，直接跳过该分片上传，继续下一个分片上传，依次类推来进行判断，虽然使用这种方式来进行比对的情况下，会需要一点时间，但是相对于我们重新上传消耗的时间来讲，这些时间不算什么的。下次有空我们来分析下断点续传的基本原理哦。分片上传原理基本分析到这里哦。
github源码查看
Node + js实现大文件分片上传基本原理及实践(一)的更多相关文章
-
js实现大文件分片上传的方法
借助js的Blob对象FormData对象可以实现大文件分片上传的功能,关于Blob和FormData的具体使用方法可以到如下地址去查看FormData 对象的使用Blob 对象的使用以下是实现代码, ...
-
js+php大文件分片上传
1 背景 用户本地有一份txt或者csv文件,无论是从业务数据库导出.还是其他途径获取,当需要使用蚂蚁的大数据分析工具进行数据加工.挖掘和共创应用的时候,首先要将本地文件上传至ODPS,普通的小文件通 ...
-
nodeJs + js 大文件分片上传
简单的文件上传 一.准备文件上传的条件: 1.安装nodejs环境 2.安装vue环境 3.验证环境是否安装成功 二.实现上传步骤 1.前端部分使用 vue-cli 脚手架,搭建一个 demo 版本, ...
-
Webuploader 大文件分片上传
百度Webuploader 大文件分片上传(.net接收) 前阵子要做个大文件上传的功能,找来找去发现Webuploader还不错,关于她的介绍我就不再赘述. 动手前,在园子里找到了一篇不错的分片 ...
-
java springboot 大文件分片上传处理
参考自:https://blog.csdn.net/u014150463/article/details/74044467 这里只写后端的代码,基本的思想就是,前端将文件分片,然后每次访问上传接口的时 ...
-
vue+大文件分片上传
最近公司在使用vue做工程项目,实现大文件分片上传. 网上找了一天,发现网上很多代码都存在很多问题,最后终于找到了一个符合要求的项目. 工程如下: 对项目的大文件上传功能做出分析,怎么实现大文件分片上 ...
-
iOS大文件分片上传和断点续传
总结一下大文件分片上传和断点续传的问题.因为文件过大(比如1G以上),必须要考虑上传过程网络中断的情况.http的网络请求中本身就已经具备了分片上传功能,当传输的文件比较大时,http协议自动会将文件 ...
-
thinkphp+webuploader实现大文件分片上传
大文件分片上传,简单来说就是把大文件切分为小文件,然后再一个一个的上传,到最后由这些小文件再合并成原来的文件 webuploader下载地址及其文档:http://fex.baidu.com/webu ...
-
在React中使用WebUploader实现大文件分片上传的踩坑日记！
前段时间公司项目有个大文件分片上传的需求,项目是用React写的,大文件分片上传这个功能使用了WebUploader这个组件. 具体交互是: 1. 点击上传文件button后出现弹窗,弹窗内有选择文件 ...
随机推荐
-
Android View 简析
基于android 4.4上源码分析: setContentView流程: getwindow() ->setContentView() -> installDecor() -> a ...
-
Nginx负载均衡配置实例详解
负载均衡是我们大流量网站要做的一个东西,下面我来给大家介绍在Nginx服务器上进行负载均衡配置方法,希望对有需要的同学有所帮助哦. 负载均衡 先来简单了解一下什么是负载均衡,单从字面上的意思来理解就可 ...
-
转:简单的RTSP消息交互过程
简单的RTSP消息交互过程 C表示RTSP客户端,S表示RTSP服务端 1. 第一步:查询服务器端可用方法 1.C->S:OPTION request //询问S有哪些方法可用 ...
-
Mysql的cmake编译与安装
Mysql的cmake编译与安装 实验准备环境: 我的操作系统是centos6.6 编译安装MariaDB之前,我们需要准备一些需要的环境 1.开发包组套件 [root@node19 ~]# yum ...
-
【原创】lua编译时发现缺少readline库
编译lualua项目,其中用到了lua-5.1版本的源码,编译时提示缺少readline库,找不到readline/readline.h头文件等 发现系统中其实有安装readline库不过没有做链接和 ...
-
CSS3 总结-1
新的边框属性 属性 描述 CSS border-image 设置所有 border-image-* 属性的简写属性. 3 border-radius 设置所有四个 border-*-radius 属性 ...
-
Android 最热的高速发展框架XUtils
近期搜了一些框架供刚開始学习的人学习,比較了一下XUtils是眼下git上比較活跃 功能比較完好的一个框架,是基于afinal开发的,比afinal稳定性提高了不少.以下是介绍: 鉴于大家的热情,我又 ...
-
最小的MVC工程
asp.net mvc笔记一,最小的MVC工程 Asp.net MVC项目默认会引用很多第三方插件,特别是现在的5.0,默认示例项目就几十M,搞得都不知道那些才是MVC必须的,是重点,那些是可有可 ...
-
node.js存json数据到mysql
众所周知,mysql是无法存储json数据的,这个刚开始笔者也是知道的,也知道JSON.stringify()这个API的,但是当我真正要这样做利用JSON.stringify()讲要转换的JSON数 ...
-
c# tolist() 浅析
在介绍tolist()的时候我先个大家介绍一下linq的延迟加载: var products = new List<Product> { , Category = "Electr ...