• 文件分片上传设计

    shigen日更文章的博客写手，擅长Java、python、vue、shell等编程语言和各种应用程序、脚本的开发。记录成长，分享认知，留住感动。

    现在是接近凌晨了，突然有伙伴给我提到了文件分片上传的事情，我一想，这个我熟悉呀。因为在若干月前，我想亲手写了这部分的代码，还给自己整理出了飞书文档。对，一看文件，原来是遥远的2023年6月20日。

    shigen的飞书文档截图

    其实说分片上传，原理很简单，就是前端分片、上传，后端的解析合并。其实半句话就可以讲清楚，但是代码实现起来要花很大的功夫。

    今天的代码案例shigen选取的是node.js作为后端服务写的文件上传。

    我们先来看一下实现的效果：

    选择文件之后出现一批调用上传的接口

    后端产生的文件夹

    查看到的小姐姐视频

    控制台输出的部分日志

    整体的传输效果很快，会在文件夹里存储分片，在所有的分片上传完毕之后，整合成一个文件。我可以直接的打开和预览。

    那代码怎么设计的呢？这是个核心的问题。一起来和shigen看看吧。

    代码设计

    前端

    文件名为index.html。

    <html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>file-uploadtitle>
head>

<body>
    <input type="file" onchange="selFile(event)" />
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.4/axios.min.js">script>

    <script>
        // default size: 0.5MB
        function createThunk(file, size = 1024 * 1024 * 0.5) {
            const res = [];
            let cur = 0
            while (cur < file.size) {
                res.push({
                    tempFile: file.slice(cur, cur + size),
                });
                cur += size;
            }
            return res;
        }

        function selFile(event) {
            const file = event.currentTarget.files[0];
            const fileList = createThunk(file);
            console.log(file);
            // console.log(fileList);
            // 发送请求, uuid作为文件名
            // const uuid = crypto.randomUUID(); // Uncaught TypeError: crypto.randomUUID is not a function
            const uuid = file.name;
            const uploadList = fileList.map((item, index) => {
                const formData = new FormData();
                // formData includes chunk,name, filename
                formData.append('chunk', item.tempFile);
                formData.append('name', uuid + "_" + index);
                formData.append('filename', uuid);
                return axios.post('/upload_file_thunk', formData);
            });
            // after all files are uploaded
            Promise.all(uploadList).then((res) => {
                console.log('upload success');
                axios.post('/upload_thunk_end', {
                    filename: uuid,
                    extname: file.name.split('.').slice(-1)[0],
                }).then((res) => {
                    console.log(res.data);
                });
            });
        }    
    script>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57

    前端部分的代码分析如下：

    1. 异步的网络请求-上传文件选取的是axios作为工具，很符合promise风格，写起来也丝滑友好；
    2. 采用了输入框的失去焦点事件，失去焦点即上传文件。文件根据规定的大小0.5MB分块，用UUID+文件分片序号作为新的文件标识，异步的调用分片上传文件的接口
    3. 当所有的分片上传完毕之后，调用合并文件的接口，实现文件的合并。

    是不是顿时感觉so easy了。我们再来看看后端的代码。

    后端

    文件名为：app.js。

    const express = require('express');
const multiparty = require('multiparty');
const fs = require('fs');
const path = require('path');

const app = express();

app.use(express.json());
app.use('/', express.static('./public'));

app.post('/upload_file_thunk', (req, res) => {
    const form = new multiparty.Form();
    form.parse(req, (err, fields, files) => {
        if (err) {
            res.json({
                code: 0,
                data: {},
            });
        } else {
            // save chunk files
            console.log(fields);
            fs.mkdirSync('./public/uploads/thunk/' + fields['filename'][0], {
                recursive: true
            });
            // move
            console.log('files', files);
            fs.renameSync(files['chunk'][0].path, './public/uploads/thunk/' + fields['filename'][0] + '/' + fields['name'][0]);
            res.json({
                code: 1,
                data: '分片上传成功',
            });
        }
    });
});

/**
 * 文件合并
 * @param {*} sourceFiles 源文件
 * @param {*} targetFile  目标文件
 */
function thunkStreamMerge(sourceFiles, targetFile) {
    const thunkFilesDir = sourceFiles;
    const list = fs.readdirSync(thunkFilesDir); // 读取目录中的文件

    const fileList = list
        .sort((a, b) => a.split('_')[1] * 1 - b.split('_')[1] * 1)
        .map((name) => ({
            name,
            filePath: path.resolve(thunkFilesDir, name),
        }));
    const fileWriteStream = fs.createWriteStream(targetFile);
    thunkStreamMergeProgress(fileList, fileWriteStream, sourceFiles);
}

/**
 * 合并每一个切片
 * @param {*} fileList        文件数据
 * @param {*} fileWriteStream 最终的写入结果
 * @param {*} sourceFiles     文件路径
 */
function thunkStreamMergeProgress(fileList, fileWriteStream, sourceFiles) {
    if (!fileList.length) {
        // thunkStreamMergeProgress(fileList)
        fileWriteStream.end('完成了');
        // 删除临时目录
        // if (sourceFiles)
        //     fs.rmdirSync(sourceFiles, { recursive: true, force: true });
        return;
    }
    const data = fileList.shift(); // 取第一个数据
    const { filePath: chunkFilePath } = data;
    const currentReadStream = fs.createReadStream(chunkFilePath); // 读取文件
    // 把结果往最终的生成文件上进行拼接
    currentReadStream.pipe(fileWriteStream, { end: false });
    currentReadStream.on('end', () => {
        // console.log(chunkFilePath);
        // 拼接完之后进入下一次循环
        thunkStreamMergeProgress(fileList, fileWriteStream, sourceFiles);
    });
}

// 合并切片
app.post('/upload_thunk_end', (req, res) => {
    const fileName = req.body.filename;
    const extName = req.body.extname;
    const targetFile = './public/uploads/' + fileName + '.' + extName;
    thunkStreamMerge('./public/uploads/thunk/' + fileName, targetFile);
    res.json({
        code: 1,
        data: targetFile,
    });
});


function getLocalIP() {
    const os = require('os');
    //获取本机ip
    var interfaces = os.networkInterfaces();
    for (var devName in interfaces) {
        var iface = interfaces[devName];
        for (var i = 0; i < iface.length; i++) {
            var alias = iface[i];
            if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
                return alias.address;
            }
        }
    }
}


port = 9000;

const ip = getLocalIP();
console.log('ip', ip);
app.listen(port, () => console.log(`server running on ${getLocalIP()}:${port}......`));


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116

    这个代码就有点多了，115行，但是都是对应着后端的操作，并提供http服务。

    shigen从分析每一个接口开始：

    1. /：主要是代理到public文件夹下，展示index.html，即我们上边的代码；
    2. upload_file_thunk:主要就是上传分片，并把分片从系统的某个空间转移到我们约定的目录之下
    3. upload_thunk_end: 主要就是合并我所有的分片了。它会调用我上边定义的方法，递归的拼接文件
    4. 最后的getLocalIP是我调用锡荣的工具类实现获得局域网下我的电脑IP地址，实现内网的相互访问和文件共享。岂不是很nice、smart!

    那我启动起来就是一个命令即可：

    node app.js

    • 1

    浏览器访问输出的IP+端口即可。

    后记

    最近突然有了一种偏见，这些设计完全都是没用的。因为仙子云服务这么成熟的了，对象存储这么成熟了，谁还成天研究这些东西。我们以腾讯云的对象存储COS为例子，我们看看腾讯云COS操作文档：

    COS分片上传

    作为云服务提供厂商，它已经帮我们想好了遇到的各种情况，甚至把相应的API设计好了。我们再去想破头实现，显得是那么的无意义。因为在云时代，我们更关注的是效率的提升和业务的增长。作为云服务厂商，它给我们提供了广大的平台，我们只需要拿来即用即可。

    也希望每个企业，无论是国企、还是小公司、外包，拥抱云时代，别再花心思自研一些虚无的东西。业务的增长才是硬实力。

    以上就是今天分享的全部内容了，觉得不错的话，记得点赞 在看 关注支持一下哈，您的鼓励和支持将是shigen坚持日更的动力。同时，shigen在多个平台都有文章的同步，也可以同步的浏览和订阅：

    平台账号链接
    CSDNshigen01shigen的CSDN主页
    知乎gen-2019shigen的知乎主页
    掘金shigen01shigen的掘金主页
    腾讯云开发者社区shigenshigen的腾讯云开发者社区主页
    微信公众平台shigen公众号名：shigen

    与shigen一起，每天不一样！

  • 相关阅读:
    go-zero&go web集成gorm实战
    Soft：Eric软件界面的简介、案例应用之详细攻略
    2.6 upstream指令参数说明
    软件测试面试题：智力题。
    17.应用负载压力测试
    Java反射系列(2)：从Class获取父类方法说起
    将一维数据(序列)转化为二维数据(图像)的方法汇总GAFS, MTF, Recurrence plot,STFT
    计算机毕业设计（附源码）python自动出卷考试系统
    Mysql高级——索引优化和查询优化（1）
    ce从初阶到大牛（两台主机免密登录）
  • 原文地址：https://blog.csdn.net/weixin_55768452/article/details/134279019