原生js+express分片上传大文件

已于 2023-08-28 22:13:42 修改
阅读量87 收藏
点赞数
分类专栏： WEB案例 文章标签： node.js html upload
于 2020-09-02 16:55:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fed_guanqi/article/details/108365221
版权

原生js+express分片上传大文件

原理

  • 前端靠blob切好每个部分，发送至服务端
  • 服务端收到文件后保存唯一部分，全部上传完成后合并文件

依赖包

要点

  • 前端判断文件大小
let end = start + chunkSize >= f.size ? f.size : start + chunkSize;
  • 前端切片部分
// blob 和 file 相互转换
let aimfile = new File(
    [f.slice(start, end)],
    `${f.name.split('.')[0]}.${index}.${f.name.split('.')[1]}`, {
        type: f.type,
        lastModified: Date.now()
    }
)
  • 前端ajax方法封装
function ajax(file, cb, index, method = 'POST', url = 'http://localhost:5000/upload') {
    let xhr = new XMLHttpRequest()
    xhr.open(method, url+'?current='+index, true)
    xhr.send(file)
    xhr.onreadystatechange = () => {
        if (xhr.readyState === 4 && xhr.status === 200) {
            cb(xhr.responseText)
        }
    }
}
  • 后端接口请求处理

最关键的信息，storage
磁盘存储引擎 (DiskStorage)
磁盘存储引擎可以让你控制文件的存储。

//官方介绍
var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, '/tmp/my-uploads')
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now())
  }
})

var upload = multer({ storage: storage })

有两个选项可用，destination 和 filename。他们都是用来确定文件存储位置的函数。

destination 是用来确定上传的文件应该存储在哪个文件夹中。也可以提供一个 string (例如 ‘/tmp/uploads’)。如果没有设置 destination，则使用操作系统默认的临时文件夹。

注意: 如果你提供的 destination 是一个函数，你需要负责创建文件夹。当提供一个字符串，multer 将确保这个文件夹是你创建的。

filename 用于确定文件夹中的文件名的确定。 如果没有设置 filename，每个文件将设置为一个随机文件名，并且是没有扩展名的。

注意: Multer 不会为你添加任何扩展名，你的程序应该返回一个完整的文件名。

每个函数都传递了请求对象 (req) 和一些关于这个文件的信息 (file)，有助于你的决定。

注意 req.body 可能还没有完全填充，这取决于向客户端发送字段和文件到服务器的顺序。

  • 加工处理
let timer = null
let storage = multer.diskStorage({
    destination: function (req, file, cb) {
        // 新增目录存放文件
        const chunksPath = path.join('public/upload', file.originalname.split('.')[0]);
        if (!fs.existsSync(chunksPath)) {
            fs.mkdirSync(chunksPath, { recursive: true }); // 新建文件夹
        }

        // 配置文件保存路径
        cb(null, path.join('public/upload', file.originalname.split('.')[0]))

        // 合并文件并删除目录
        clearTimeout(timer)
        timer = setTimeout(async () => {
            // 合并文件（获取子文件名称）
            await fs.readdir(chunksPath, (err, files) => {
                if (err) throw err
                files.map((res) => {
                    // 同步合并文件
                    fs.appendFileSync(
                        `public/upload/${file.originalname.split('.')[0]}.${file.originalname.split('.')[2]}`,
                        fs.readFileSync(path.join(chunksPath, res)), // 读取文件
                        (err) => { if (err) throw err }
                    )
                });
            })

            // 删除文件
            const delFile = () => {
                fs.readdir(chunksPath, (err, files) => {
                    if (err) throw err
                    if (!files.length) {
                        delFile()
                    } else {
                        files.map(res => {
                            fs.unlinkSync(path.join(chunksPath, res), (e) => { if (err) throw err });
                        })
                    }
                })
            }
            await delFile()

            // 删除文件夹
            const del = () => {
                // 判断子文件是否为空
                fs.readdir(chunksPath, (err, files) => {
                    if (files.length != 0) {
                        del()
                    } else {
                        // 为空则删除文件夹
                        fs.rmdir(chunksPath, (err) => { if (err) throw err })
                    }
                })
            }
            await del()
        }, 500)
    },
    filename: function (req, file, cb) {
        const split = file.originalname.split('.')
        cb(null, `${split[0]}-${split[1]}`) // 文件名
    }
});

let upload = multer({ storage: storage });

app.use('/upload', upload.single('file'), function (req, res, next) {
    if (req.file) res.send('file ' + req.query.current + ' upload success!')
})

使用中间件处理请求文件。

全部

前端部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #pro {
            position: relative;
            margin-top: 10px;
            width: 500px;
            height: 10px;
            background-color: #ccc;
            border-radius: 10px;
            overflow: hidden;
        }
        #pro-current {
            position: absolute;
            left: 0;
            top: 0;
            width: 0;
            height: 10px;
            border-radius: 10px;
            background-color: #f0f;
            transition: all .5s;
        }
    </style>
</head>

<body>
    <input type="file" id="file">
    <!-- 进度条 -->
    <div id="pro">
        <div id="pro-current">
        </div>
    </div>
    <span id="pro-current-num"></span>
    <script>
        let [file, pro, num] = [document.getElementById('file'), document.getElementById('pro-current'), document.getElementById('pro-current-num')]

        file.onchange = () => {
            upload()
        }

        function upload(start = 0, index = 0, chunkSize = 1024 * 1024) {
            let f = file.files[0]

            if (start >= f.size) return
            let end = start + chunkSize >= f.size ? f.size : start + chunkSize

            // blob 和 file 相互转换
            let aimfile = new File(
                [f.slice(start, end)],
                `${f.name.split('.')[0]}.${index}.${f.name.split('.')[1]}`, {
                    type: f.type,
                    lastModified: Date.now()
                }
            )

            let form = new FormData()
            form.append('file', aimfile)

            ajax(form, (flag) => {
                if (flag) {
                    pro.style.width = end / f.size * 500 + 'px';
                    num.innerText = end / f.size * 500 / 5 + '%';
                    upload(end, ++index)
                }
            }, index)
        }

        function ajax(file, cb, index, method = 'POST', url = 'http://localhost:5000/upload') {
            let xhr = new XMLHttpRequest()
            xhr.open(method, url+'?current='+index, true)
            xhr.send(file)
            xhr.onreadystatechange = () => {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    cb(xhr.responseText)
                }
            }
        }
    </script>
</body>
</html>

后端部分

const express = require('express')
const path = require('path')
const multer = require('multer')
const fs = require('fs')

let timer = null
let storage = multer.diskStorage({
    destination: function (req, file, cb) {
        // 新增目录存放文件
        const chunksPath = path.join('public/upload', file.originalname.split('.')[0]);
        if (!fs.existsSync(chunksPath)) {
            fs.mkdirSync(chunksPath, { recursive: true }); // 新建文件夹
        }

        // 配置文件保存路径
        cb(null, path.join('public/upload', file.originalname.split('.')[0]))

        // 合并文件并删除目录
        clearTimeout(timer)
        timer = setTimeout(async () => {
            // 合并文件（获取子文件名称）
            await fs.readdir(chunksPath, (err, files) => {
                if (err) throw err
                files.map((res) => {
                    // 同步合并文件
                    fs.appendFileSync(
                        `public/upload/${file.originalname.split('.')[0]}.${file.originalname.split('.')[2]}`,
                        fs.readFileSync(path.join(chunksPath, res)), // 读取文件
                        (err) => { if (err) throw err }
                    )
                });
            })

            // 删除文件
            const delFile = () => {
                fs.readdir(chunksPath, (err, files) => {
                    if (err) throw err
                    if (!files.length) {
                        delFile()
                    } else {
                        files.map(res => {
                            fs.unlinkSync(path.join(chunksPath, res), (e) => { if (err) throw err });
                        })
                    }
                })
            }
            await delFile()

            // 删除文件夹
            const del = () => {
                // 判断子文件是否为空
                fs.readdir(chunksPath, (err, files) => {
                    if (files.length != 0) {
                        del()
                    } else {
                        // 为空则删除文件夹
                        fs.rmdir(chunksPath, (err) => { if (err) throw err })
                    }
                })
            }
            await del()
        }, 500)
    },
    filename: function (req, file, cb) {
        const split = file.originalname.split('.')
        cb(null, `${split[0]}-${split[1]}`) // 文件名
    }
});

let upload = multer({ storage: storage });

let app = express()

// 解决跨域
app.all('*', (req, res, next) => {
    res.header('Access-Control-Allow-Credentials', 'true')
    res.header('Access-Control-Allow-Origin', req.headers.origin)
    res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS')
    res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Token, Accept, X-Requested-With')
    next()
})

app.use('/public', express.static(path.join(__dirname, 'public')))

app.use('/upload', upload.single('file'), function (req, res, next) {
    if (req.file) res.send('file ' + req.query.current + ' upload success!')
})

app.listen(5000, () => console.log('Example app listening on port 5000!'))

参考文章

马克关
关注
专栏目录
基于 express 大文件切片上传
m0_59829675的博客
09-07 400
大文件上传，基于 express 大文件切片上传，断点续传，优化切片，优化并发
原生 JavaScript 实现大文件分片并发上传
weixin_43990363的博客
11-23 1955
原生 JavaScript 实现大文件分片并发上传 首先放上github链接，代码注释的比较清除，上层使用React继续测试，基本的功能都实现了 技术栈 TypeScript node 模块 sprak-md5 express fs fromidadle 实现的功能 分片上传 验证秒传 断点续传 并发上传 前言 此项目本来是作为一个react上传组件编写，编写后发现该组件内部相对比较复杂，于是将该组件抽离出来写成了一个上传工具类 由于分片上传需要后端支持，所以本片会涉及到一点node的知识 为什么
Html + Express 实现大文件分片上传、断点续传、秒传
m0_71349739的博客
05-11 525
在日常的网页开发中，文件上传是一项常见操作。通过文件上传技术，用户可以将本地文件方便地传输到Web服务器上。这种功能在许多场景下都是必不可少的，比如上传文件到网盘或上传用户头像等。然而，当需要上传大型文件时，可能会遇到以下问题：1.：由于文件大小较大，上传过程可能会耗费较长时间。2.：如果在上传过程中出现意外情况导致上传中断，用户需要重新开始整个上传过程，这会增加用户的不便。3.：通常，服务端会对上传的文件大小进行限制，这可能导致无法上传大型文件。
Node.js + express实现上传大文件的方法分析【图片、文本文件】
01-21
本文实例讲述了Node.js + express实现上传大文件的方法。分享给大家供大家参考，具体如下： 对于大文件的上传我们首先要引入一个叫做 multer 的库： npm install --save multer 关于这个库，大家可以查阅官方文档： 点击跳转 https://www.npmjs.com/package/multer 我们先将库引入我们的项目中： var multer = require('multer') var upload = multer({ dest: 'uploads/' })// 文件会上传到这个目录 具体的 get 方法： app.post('/up
Vue3 + Express 实现大文件分片上传、断点续传、秒传
xxq_0217的博客
03-19 2695
文件上传优化，分片上传、秒传、断点续传
nodejs + express简单实现大文件切片上传（支持断点续传）
shou_11的博客
11-13 513
【代码】nodejs + express简单实现大文件切片上传（支持断点续传）
大文件切片上传---node+js
weixin_67886512的博客
12-03 735
简约功能 适合梳理逻辑 工作中不建议使用
使用antd design pro 及后端nodejs express 结合minio进行文件的上传和下载管理_nodejs minio 上传文件
2401_83621634的博客
04-12 748
为了做好运维面试路上的助攻手，特整理了上百道。
GitHub 上的前端项目收集
qu6zhi
10-05 666
整理收集了 GitHub 上优秀的前端项目，包括：工具，优质资源，测试工具，框架，动画，编译工具，数据可视化等等，分享给大家学习。 codepen 一个在线编辑前端项目的网站，其中有一些前端大神的作品，也有很多令人惊艳的前端效果，可以浏览和下载使用。 docschina 印记中文网收集了由社区翻译的比较流行的前端相关框架、工具的中文版文档。为学习一些新的框架扫平了语言障碍。 toby 超级赞的收集与协作管理书签的chrome插件，前端开发应该都会用chrome。全球超过10W+的用户。 m
Ajax原生前端文件（切片）上传附进度后端文件Express源码
02-14
Ajax原生前端文件（切片）上传附进度后端文件Express源码 思路及原理： 1.将大文件切片 ，file是Blob类的实例，利用其slice方法可以将文件切片（HTTP可以多个并发传递（6-7）） 2.同时并发n个切片的上传 3.等n个都上传完，再发送请求合并切片（为啥不自动合并呢）
express4文件上传
11-01
express4.*+的文件上传功能小demo，下载后npm install加上node app即可运行
express 如何上传文件的原理和实现
weixin_30776863的博客
03-09 515
express 上传文件的原理和实现 原理 formidable multer COS 1.原理 1.1 要想了解express上传 我们先看看 nodejs原生上传是怎么实现的 let server = require('http').Server(app); server.listen(3000); 首先为了让express拥有原始http模块的一些功能 请不要使用 bodyParse...
vue大文件切片上传、并发上传、断点续传与后端的逻辑（express 、nestJs）
m0_68330110的博客
05-11 1271
vue大文件切片上传、并发上传、断点续传
Express实现文件上传
上庸者-不服周
11-02 1397
FormData对象提供了一种表示表单数据的键值对key/value的构造方式，并且可以轻松的将数据通过方法发送出去。
js+上传大文件
weixin_45525177的博客
08-14 532
文件夹上传：从前端到后端 文件上传是 Web 开发肯定会碰到的问题，而文件夹上传则更加难缠。网上关于文件夹上传的资料多集中在前端，缺少对于后端的关注，然后讲某个后端框架文件上传的文章又不会涉及文件夹。今天研究了一下这个问题，在此记录。 先说两个问题： 是否所有后端框架都支持文件夹上传？ 是否所有浏览器都支持文件夹上传？ 第一个问题：YES，第二个问题：NO 只要后端框架对于表单的支持是...
基于express的文件上传功能实现
weixin_49592687的博客
05-03 1628
基于express 的文件上传功能 功能描述 可以上传文件,并在后台中看到上传的文件 可以上传图片,并进行一个简单预览,点击提交后可以在后台中看到 功能展示 功能实现 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
express实现文件上传功能
qq_43934844的博客
11-04 2207
express实现文件上传功能
Node.js 中使用 bcrypt 对密码进行哈希处理
最新发布
每天都要努力学习哦~~
10-02 1176
无论您是一位经验丰富的 Node.js 开发者，希望加强您的身份验证实践，还是一位初学者，希望学习安全密码管理的最佳技术，本文都将对您有所帮助。bcrypt 的强大算法，结合自适应哈希处理和盐生成，提供了可靠的防御机制，以应对常见的基于密码的漏洞。通过遵循这些最佳实践，并警惕不断演变的威胁，我们可以创建一个安全的认证系统，让用户信心倍增，并维护应用程序的完整性。首先，在使用 npm 安装 bcrypt 包后，确保将其导入到您的 Node.js 应用程序的 index.js 文件中，以有效地利用其功能。
Spring Boot + JavaScript 实战：大文件分片上传、断点续传与秒传
大文件上传涉及到的技术难题包括如何提高用户体验，如分片上传、断点续传以及秒传等。 首先，对于小文件上传，文档介绍了一个基于SpringBoot 3.1.2和JDK 17的后端示例，使用了Spring Boot Starter Web来简化开发...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值