前端大文件上传、文件切片、断点续传

最新推荐文章于 2024-07-01 14:22:18 发布

weixin_52041354

最新推荐文章于 2024-07-01 14:22:18 发布

阅读量307

点赞数

文章标签：前端状态模式

一、项目初始化
1、项目初始化
我们创建一个 big-file-upload 目录作为当前项目的根目录文件。

执行以下命令对当前项目进行初始化，生成 package.json 文件：

npm init -y
2、搭建项目结构
在项目根目录中创建 public 目录，作为前端静态资源目录。同时在 public 中创建 index.html 用于构建前端页面。

｜— chunks # 保存上传的文件切片
｜— public # 保存前端资源
｜— files # 存放上传成功的大文件
｜— js # 存放前端 JS 文件
｜｜— axios.min.js # 发送请求
｜— index.html # 前端页面
｜— server.js # 后端服务器代码
3、下载服务端依赖包
下载项目所需依赖包：

npm i express fs-extra multiparty
插件说明：

express：搭建服务器

fs-extra：文件处理

multiparty：文件上传

二、前后端初始代码
1、前端页面
前端 index.html 页面初始代码如下：

<div>
    <input type="file" id="chooseFile">
    <button id="uploadFile">上传</button> 
</div>
<div style="margin: 20px 0;">
    <progress value="0" id="progress"></progress>
    <span id="message"></span>
</div>
<div>
    <button id="stopUpload">暂停</button>
    <button id="keepUpload">续传</button>
</div>

<script>
    const chooseFile = document.getElementById('chooseFile');
    const uploadFile = document.getElementById('uploadFile');
    const progress = document.getElementById('progress');
    const message = document.getElementById('message');
    const stopUpload = document.getElementById('stopUpload');
    const keepUpload = document.getElementById('keepUpload');
</script>

2、后端服务器
后端 server.js 初始代码如下：

const express = require(‘express’);
const bodyParser = require(‘body-parser’);
const path = require(‘path’);
const fse = require(‘fs-extra’);
const multiparty = require(‘multiparty’);

const app = express();
// 设置静态文件目录
app.use(express.static(__dirname + ‘/public’));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());



// 后续的接口配置代码

app.listen(3000, () => console.log('3000 端口启动成功'));

3、启动项目
在终端中执行以下命令启动后端 express 服务器：

node server.js
如果安装了 nodemon 插件，也可以用插件启动服务器（服务器可自动重启）：

nodemon server.js
服务器启动成功后，在浏览器中访问 http://localhost:3000 即可显示 index.html 页面。

三、分片上传（前端）
1、获取选中文件

let checkedFile = null; // 用户选中的文件
chooseFile.addEventListener('change', function (e) {
    const [file] = e.target.files;
    if(file) {
        checkedFile = file;
    }
})

2、文件切片

const chunkSize = 3 * 1024 * 1024; // 每一个分片的大小：3M
const chunksList = [];  // 用户选中文件的切片文件

// 上传文件
uploadFile.addEventListener('click', function () {
    // 如果没有选中的文件，直接结束
    if (!checkedFile) return;  
    // 文件切片
    createChunks();
})
// 创建文件切片
const createChunks = () => {
    let start = 0;   // 切片文件的起始位置
    while (start < checkedFile.size) {
        // 文件切片
        const chunkItem = checkedFile.slice(start, start + chunkSize);
        // 将切片保存到全局的切片数组中
        chunksList.push(chunkItem);
        start += chunkSize;
    }
}

3、上传切片
我们通过 axios 来发送请求，所以需要在 index.html 中引入 axios，并配置基础路径：

<script src="./js/axios.min.js"></script>
<script>
    axios.defaults.baseURL = 'http://localhost:3000';
    // ... 其他代码
</script>

将切片文件数据通过 formData 发送给后端：

// 上传文件
uploadFile.addEventListener('click', function () {
    // 如果没有选中的文件，直接结束
    if (!checkedFile) return;
    // 文件切片
    const chunksList = createChunks();
    // 上传切片
    uploadChunks(chunksList);
})

// 上传切片
const uploadChunks = async () => {
    // 处理切片数据格式
    const formDataList = chunksList.map((chunkItem, index) => {
        let formData = new FormData();
        formData.append('file', chunkItem);   // 切片文件信息
        formData.append('fileName', checkedFile.name); // 完整文件名
        formData.append('chunkName', index);  // 切片名(将 index 作为每一个切片的名字)
        return formData;
    });
    // 依次上传每一个切片文件
    const requestList = formDataList.map(formData => {
        return axios({
            url: '/upload',
            data: formData,
            method: 'POST'
        })
    });
    // 等待所有切片上传完成
    await Promise.all(requestList);
}

四、分片上传（后端）
配置上传的切片文件的存储路径：

// 上传的切片文件的存储路径
const ALL_CHUNKS_PATH = path.resolve(__dirname, ‘chunks’);
配置 /upload 接口：

app.post('/upload', (req, res) => {
    const multipartyForm = new multiparty.Form();
    multipartyForm.parse(req, async (err, fields, files) => {
        if (err) {
            console.log('文件切片上传失败:', err);
            res.send({
                code: 0,
                message: '文件切片上传失败'
            });
            return;
        }
        // 前端发送的切片文件信息
        const [file] = files.file;
        // 前端发送的完整文件名 fileName 和分片名 chunkName
        const { fileName: [fileName], chunkName: [chunkName] } = fields;
        // 当前文件的切片存储路径（将文件名作为切片的目录名）
        const chunksPath = path.resolve(ALL_CHUNKS_PATH, fileName);
        // 判断当前文件的切片目录是否存在
        if (!fse.existsSync(chunksPath)) {
            // 创建切片目录
            fse.mkdirSync(chunksPath);
        }
        // 将前端发送的切片文件移动到切片目录中
        await fse.move(file.path, `${chunksPath}/${chunkName}`);
        res.send({
            code: 1,
            message: '切片上传成功'
        })
    })
})

五、合并分片（前端）
等到所有的切片上传完成后，发送 /merge 请求合并切片：

// 合并切片
const mergeChunks = async () => {
const { data } = await axios({
url: ‘/merge’,
method: ‘POST’,
data: {
chunkSize,
fileName: checkedFile.name
}
});
if(data.code) {
message.innerText = ‘文件上传成功’;
}
}



// 上传切片
const uploadChunks = async (chunksList) => {
    // ....
    // 等待所有切片上传完成
    await Promise.all(requestList);
    mergeChunks();
}

六、合并分片（后端）
配置切片合并完成后的完成文件存储路径：

// 切片合并完成后的文件存储路径
const UPLOAD_FILE_PATH = path.resolve(__dirname, ‘public/files’);
配置合并切片接口 /merge 代码：

app.post('/merge', async (req, res) => {
    // 获取前端发送的参数
    const { chunkSize, fileName } = req.body;
    // 当前文件切片合并成功后的文件存储路径
    const uploadedFile = path.resolve(UPLOAD_FILE_PATH, fileName);
    // 找到当前文件所有切片的存储目录路径
    const chunksPath = path.resolve(ALL_CHUNKS_PATH, fileName);
    // 读取所有的切片文件，获取到文件名
    const chunksName = await fse.readdir(chunksPath);
    // 对切片文件名按照数字大小排序
    chunksName.sort((a, b) => (a - 0) - (b - 0));
    // 合并切片
    const unlinkResult = chunksName.map((name, index) => {
        // 获取每一个切片路径
        const chunkPath = path.resolve(chunksPath, name);
        // 获取要读取切片文件内容
        const readChunk = fse.createReadStream(chunkPath);
        // 获取要写入切片文件配置
        const writeChunk = fse.createWriteStream(uploadedFile, {
            start: index * chunkSize,
            end: (index + 1) * chunkSize
        })
        // 将读取到的 readChunk 内容写入到 writeChunk 对应位置
        readChunk.pipe(writeChunk);

        return new Promise((resolve) => {
            // 文件读取结束后删除切片文件(必须要将文件全部删除后，才能才能外层文件夹)
            readChunk.on('end', () => {
                fse.unlinkSync(chunkPath);
                resolve();
            });
        })
    })
    // 等到所有切片文件合并完成，且每一个切片文件都删除成功
    await Promise.all(unlinkResult);
    // 删除切片文件所在目录
    fse.rmdirSync(chunksPath);
    res.send({
        code: 1,
        message: '文件上传成功'
    })
})

七、秒传（前端）
秒传，指的就是用户当前选择上传的文件，之前已经传递过，就可以直接提示上传成功。

前端发送 /verify 请求到后端，用于判断当前文件是否已经上传过：

// 上传文件
uploadFile.addEventListener('click', async function () {
    // 如果没有选中的文件，直接结束
    if (!checkedFile) return;

    // 验证文件之前是否上传成功过
    const res = await verifyFile();
    if(res.code) {
        message.innerText = "上传成功（秒传）";
        return;   // 终止后续代码的执行
    }

    // 文件切片
    const chunksList = createChunks();
    // 上传切片
    uploadChunks(chunksList);
})

// 验证文件是否上传过
const verifyFile = async () => {
    const { data } = await axios({
        url: '/verify',
        method: 'POST',
        data: {
            fileName: checkedFile.name
        }
    });
    return data;
}

八、秒传（后端）

app.post('/verify', (req, res) => {
    // 获取前端发送的文件名
    const { fileName } = req.body;
    // 获取当前文件路径（如果上传成功过的保存路径）
    const filePath = path.resolve(UPLOAD_FILE_PATH, fileName);
    // 判断文件是否存在
    if (fse.existsSync(filePath)) {
        res.send({
            code: 1,
            message: '文件已存在，不需要重新上传'
        });
        return;
    }
    res.send({
        code: 0,
        message: '文件未上传过'
    })
})

九、暂停上传（前端）
暂停上传，是通过取消 axios “切片上传”请求的发送，来实现文件暂停上传：

const CancelToken = axios.CancelToken;
let source = CancelToken.source();

// 暂停上传
stopUpload.addEventListener('click', function () {
    // 取消后续所有“切片上传”请求的发送
    source.cancel('终止上传！');
    // 重置 source
    source = CancelToken.source();
    message.innerText = "暂停上传";
})

// 上传切片
const uploadChunks = async (chunksList) => {
    // ...
    // 依次上传每一个切片文件
    const requestList = formDataList.map(formData => {
        return axios({
            url: '/upload',
            data: formData,
            method: 'POST',
            cancelToken: source.token,   // 添加 cancelToken，用于后续取消请求发送
        })
    });
    // ....
}

十、断点续传（后端）
断点续传，就是要判断当前文件是否上传完成，如果没有上传完成，就需要找到已上传的其中一部分。

因此，“断点续传”和“验证文件是否上传成功过”可以使用同一个后端接口：

app.post('/verify', async (req, res) => {
    // 获取前端发送的文件名
    const { fileName } = req.body;
    // 获取当前文件路径（如果上传成功过的保存路径）
    const filePath = path.resolve(UPLOAD_FILE_PATH, fileName);
    // 判断文件是否存在
    if (fse.existsSync(filePath)) {
        res.send({
            code: 1,
            message: '文件已存在，不需要重新上传'
        });
        return;
    }

    // 断点续传：判断文件是否有上传的一部分切片内容
    // 获取该文件的切片文件的存储目录
    const chunksPath = path.resolve(ALL_CHUNKS_PATH, fileName);
    // 判断该目录是否存在
    if (fse.existsSync(chunksPath)) {
        // 目录存在，则说明文件之前有上传过一部分，但是没有完整上传成功
        // 读取之前已上传的所有切片文件名
        const uploaded = await fse.readdir(chunksPath);
        res.send({
            code: 0,
            message: '该文件有部分上传数据',
            uploaded
        });
        return;
    }
    
    res.send({
        code: 0,
        message: '文件未上传过'
    })
})

十一、断点续传（前端）

// 上传文件
uploadFile.addEventListener('click', async function () {
    // ...
    // 上传所有切片
    uploadChunks(res.uploaded);  // 将已上传的部分数据传递过去
})
// 点击续传按钮
keepUpload.addEventListener('click', async function () {
    const res = await verifyFile();
    if (!res.code) {
        // 只要没有上传成功，不管是否有之前的上传记录，都需要继续上传
        uploadChunks(res.uploaded);  // 将已上传的部分数据传递过去
    }
})

// 上传切片
const uploadChunks = async (uploaded = []) => {
    // 处理切片数据格式
    // ...
    // 将处理好的文件切片 formData 数据中，还未上传的部分筛选出来
    formDataList = formDataList.filter((_, index) => uploaded.indexOf(index + '') < 0);

    // 依次上传每一个切片文件
    // ...
}

十二、进度条

// 上传文件
uploadFile.addEventListener('click', async function () {
    // ...

    // 验证文件之前是否上传成功过
    const res = await verifyFile();
    if (res.code) {
        message.innerText = "上传成功（秒传）";
        progress.value = progress.max;   // 将文件最大值设置为进度条的 value 值
        return;   // 终止后续代码的执行
    }
    // ...
})

// 上传切片
const uploadChunks = async (uploaded = []) => {
    // 将之前已上传的切片数量设置为当前进度条的进度
    progress.value = uploaded.length; 
    // ...
    // 依次上传每一个切片文件
    const requestList = formDataList.map(formData => {
        return axios({
            // ...
        }).then(() => {
            // 每一个切片上传成功后，进度条都 +1
            progress.value++;
        })
    });
    // 等待所有切片上传完成
    // ...
}

// 创建文件切片
const createChunks = () => {
    // ...

    // 将文件切片的总数作为进度条的最大值
    progress.max = chunksList.length;
}

参考文章：http://blog.ncmem.com/wordpress/2023/09/22/%e5%89%8d%e7%ab%af%e5%a4%a7%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0%e3%80%81%e6%96%87%e4%bb%b6%e5%88%87%e7%89%87%e3%80%81%e6%96%ad%e7%82%b9%e7%bb%ad%e4%bc%a0/
欢迎入群一起讨论

在这里插入图片描述

weixin_52041354

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端大文件上传、文件切片、断点续传

参考文章：http://blog.ncmem.com/wordpress/2023/09/22/%e5%89%8d%e7%ab%af%e5%a4%a7%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0%e3%80%81%e6%96%87%e4%bb%b6%e5%88%87%e7%89%87%e3%80%81%e6%96%ad%e7%82%b9%e7%bb%ad%e4%bc%a0/断点续传，就是要判断当前文件是否上传完成，如果没有上传完成，就需要找到已上传的其中一部分。
复制链接

扫一扫