大文件上传&切片上传

大文件上传&切片上传

简历中如何写项目经验&技术

切片上传相关面试题

基础实现流程

实现核心：秒传?断点续传?切片?……?如何实现的

最基本的视图

加上拖拽

加上拖拽事件。监听drop事件，event.dataTransfer.files文件对象。其他dragenter?dragover?dragleave事件event.stopPropagation?event.preventDefault

文件预览。URL.createObjectUrl

切片上传实现

根据文件内容得到加密文件名。

file->arrayBuffer->加密buffer->buffer.toString

优化点：放到webworker里不会使用js内存

文件切片?blob.slice

并行上传每个分片。优化点：并发管控

node层：核心的2个接口

上传单个切片的接口

合并切片的接口

const?express?= require('express');
const?logger?= require('morgan');
const {?StatusCodes?} = require('http-status-codes');
const?cors?= require('cors');
const?fs?= require('fs-extra');
const?path?= require('path');
const PUBLIC_DIR =?path.resolve(__dirname, 'public');
const TEMP_DIR =?path.resolve(__dirname, 'temp');
const CHUNK_SIZE = 100 * 1024 * 1024;
//存放上传并合并好的文件
fs.ensureDirSync(PUBLIC_DIR);
//存放分片的文件
fs.ensureDirSync(TEMP_DIR);
const?app?= express();
app.use(logger('dev'));
app.use(cors());
app.use(express.json());
app.use(express.urlencoded({?extended: true }));
app.use(express.static(path.resolve(__dirname, 'public')));
/**
?*?上传分片
?*/
app.post('/upload/:filename', async (req,?res,?next) => {
    //通过路径参数获取文件名
    const {?filename?} =?req.params;
    //通过查询参数获取分片名
    const {?chunkFileName?} =?req.query;
    //写入文件的起始位置
    const?start?= isNaN(req.query.start)?0:parseInt(req.query.start,10);
    //创建用户保存此文件的分片的目录
    const?chunkDir?=?path.resolve(TEMP_DIR,?filename);
    //分片的文件路径
    const?chunkFilePath?=?path.resolve(chunkDir,?chunkFileName);
    //先确定分片目录存在
    await?fs.ensureDir(chunkDir);
    //创建此文件的可写流?,可以指定写入的起始位置
    const?ws?=?fs.createWriteStream(chunkFilePath, {start,flags:'a'});
    //后面会实现暂停操作，如果客户端点击了暂停按钮，会取消上传的操作，取消之后会在服务器触发请求择象的
    //aborted事件，关闭可定流
????req.on('aborted', () => {?ws.close() });
    //使用管道的方式把请求中的请求体流数据写入到文件中
    try {
        await pipeStream(req,?ws);
????????res.json({?success: true });
    } catch (error) {
        next(error);
    }
});

app.get('/merge/:filename', async (req,?res,?next) => {
    //通过路径参数获取文件名
    const {?filename?} =?req.params;
    try {
        await mergeChunks(filename);
????????res.json({?success: true });
    } catch (error) {
        next(error)
    }
});
app.get('/verify/:filename',async (req,res,next)=>{
    const {filename} =?req.params;
    //先获取文件在服务器的路径
    const?filePath?=?path.resolve(PUBLIC_DIR,filename);
    //判断是文件在服务器端是否存在
    const?isExist?= await?fs.pathExists(filePath);
    //如果已经存在了，则直接返回不需要上传了
    if(isExist){
        return?res.json({success:true,needUpload:false});
    }
    const?chunksDir?=?path.resolve(TEMP_DIR,filename);
    const?existDir?= await?fs.pathExists(chunksDir);
    //存放已经上传的分片的对象数组
    let?uploadedChunkList?=[];
    if(existDir){
        //读取临时目录里面的所有的分片对应的文件
        const?chunkFileNames?= await?fs.readdir(chunksDir);
        //读取每个分片文件的文件信息，主要是它的文件大小，表示已经上传的文件的大小
????????uploadedChunkList?= await?Promise.all(chunkFileNames.map(async function(chunkFileName){
            const {size} = await?fs.stat(path.resolve(chunksDir,chunkFileName));
            return {chunkFileName,size};
        }));
    }
    //如果没有此文件，则意味着服务器还需要你上传此文件
    //返回，上传尚未完成，但是已经上传了一部分了，我把已经上传的分片名，以及分片的大小给客户端
    //客户端可以只上传分片剩下的数据部就可以了
????res.json({success:true,needUpload:true,uploadedChunkList});
});
async function mergeChunks(filename) {
    const?mergedFilePath?=?path.resolve(PUBLIC_DIR,?filename);
    const?chunkDir?=?path.resolve(TEMP_DIR,?filename);
    const?chunkFiles?= await?fs.readdir(chunkDir);
    //对分片按索引进行升序排列
????chunkFiles.sort((a,?b) => Number(a.split('-')[1]) - Number(b.split('-')[1]));
    try {
        //为了提高性能，我们在这时可以分片并行写入
        const?pipes?=?chunkFiles.map((chunkFile,?index) => {
            return pipeStream(
????????????????fs.createReadStream(path.resolve(chunkDir,?chunkFile), {?autoClose: true }),
????????????????fs.createWriteStream(mergedFilePath, {?start:?index?* CHUNK_SIZE })
            );
        });
        //并发把每个分片的数据写入到目标文件中
        await?Promise.all(pipes);
        //删除分片的文件和文件夹
        await?fs.rmdir(chunkDir, {?recursive: true })
        //合并完文件之后可以重新在这里计算合并后的文件的hash值，和文件中的hash值进行对比
        //如果值是一样的，说明肯定内容是对的，没有被修改
    } catch (error) {
        next(error)
    }
}
function pipeStream(rs,?ws) {
    return new Promise((resolve,?reject) => {
        //把可读流中的数据写入可写流中
????????rs.pipe(ws).on('finish',?resolve).on('error',?reject);
    });
}
app.listen(8080, () =>?console.log('Sever?started?on?port?8080'));

进度是每个切片的进度

秒传：已经存在就不传了

取消上传：cancelToken

断点续传：用户点了暂停/网络断开的情况。

优化点：

把耗时的操作放到worker里，不要阻塞主进程

let?worker=new?Worker('./fileCalculate')

worker.postMessage?self.on('message')

如果失败重试3次：但是做的是整个失败重试

待考虑问题：

如何确定切片大小？

如何做文件校验？