node实现文件上传(1)

已于 2022-12-02 20:03:36 修改
阅读量951 收藏 2
点赞数
文章标签： 前端 服务器 node.js jquery
于 2022-12-02 20:03:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73849466/article/details/128153391
版权

1、FormData对象：

        以对象的方式来表示页面中的表单，又称为表单对象。以key-value的方式来保存数据，XMLHttpRequest对象可以轻松的表单对象发送的服务器端

​ （1）是一个构造函数：new FormData()

（2）常用的API：

        ​ FormData.append(key，value)：追加数据。向formdata中追加key-value

        ​ FormData.get(key)：获取key对应的值

​         FormData.delete(key)：删除key对应的值

​         FormData.has(key)：判断formdata中是否有key

 

2、node使用formidable模块实现文件上传

​ （1）安装：npm install formidable(终端输入)

​ （2）创建Formidable.IncomingForm对象：本质是一个表单对象

​         let form = new Formidable.IncomingForm()

​ （3）Formidable.IncomingForm对象的属性：

​         form.encoding ： 设置字符集

​         form.uploadDir：设置上传文件的保存路径

​         form.keepExtensions：true，表示上传时保留原来的扩展名

（4）Formidable.IncomingForm对象的方法：

        ​ form.parse(request, [callback])：转换请求中的表单数据

​ （5）Formidable.File对象的属性

​         size：上传文件的大小

​         path：上传文件的路径

​         type：上传文件的类型

​         name：上传的文件名

举个例子

  1. 上传图片：
  2. 将图片文件上传到服务器端的指定目录
  3. 将图片文件名和服务器的地址进行拼接
  4. 将拼接后的图片的路径响应给客户端，在div中显示出来

---客户端

 -----服务器端

4、文件上传需要注意的问题

​ （1）前端FormData对象作用：用于保存上传文件的信息。格式：key-value

​ （2）后台formidable模块的作用：使用parse方法来解析前端的formdata对象

 

（3）上传过程中前后端的对应关系

 

二、Express实现文件下载

1、使用res对象(响应对象)的download方法即可（该方法效率低）

 

三、遍历下载文件夹下的文件，拼接成一个下载的url，传递到前端

 

 

 

 

 

Sakura蜗牛
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
NodeJS使用formidable实现文件上传
10-21
主要为大家详细介绍了NodeJS使用formidable实现文件上传的相关方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
node中文件的上传与下载
嗨皮的博客
12-07 1752
前端打包表单数据发送给服务器，服务器通过sequelize模块向mysql数据库中存储数据，并将图片文件保存在服务器中
Nodejs 第五十八章（大文件上传）
最新发布
qq1195566313的博客
03-19 726
在现代网站中，越来越多的个性化图片，视频，去展示，因此我们的网站一般都会支持文件上传。文件上传的方案大文件上传断点续传。
node实现文件上传和下载
m0_74343097的博客
01-03 2289
node实现文件上传和下载
Vue3 + Nodejs 实战 ，文件上传项目--实现图片上传
m0_64642443的博客
10-12 1742
系列专栏：vue3+nodejs 实战之文件上传欢迎关注本系列记录vue3(前端)+nodejs(后端) 实现一个文件上传项目，目前只完成了图片的上传，后续会陆续完成：单文件上传，多文件上传，大文件分片上传，拖拽上传等功能，欢迎关注。
node+vue实现文件上传功能
01-19
本文实例为大家分享了node+vue实现文件上传的具体代码，供大家参考，具体内容如下 *后端* const express = require('express'); const Router = express.Router(); const multer = require('multer'); const fs = ...
node中间层实现文件上传功能
08-27
主要介绍了node中间层实现文件上传功能,本文给大家介绍的非常详细，需要的朋友可以参考下
node文件上传功能简易实现代码
01-21
找了不少文件上传的相关模块，最后选择了比较常用，并且是express推荐使用的 multer 来实现文件上传，附上 GitHub 地址 1. 开始 开始第一步，自然就是安装模块，不多说 npm install multer --save 这里简单说一下...
Node.js实现文件上传的示例
10-19
本篇文章主要介绍了Node.js实现文件上传的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue3+node.js实现图片上传和文件上传+保存文件到node.js后端
weixin_68397463的博客
09-13 1328
vue3+node.js实现图片上传和文件上传+保存文件到node.js后端
使用node实现上传文件
紫月i的博客
11-18 6417
首先介绍一下FormData对象的使用： 1.自动将全部表单对象中的数据拼接成请求参数的格式 2.异步上传二进制文件 FormData对象的使用： 1.准备HTML表单 <form id="form"> <input type="text" name="username"/> <input type="password" name="password"/> <button type="button" id="btn">提交</butto
nodeJs-文件上传
软工二班秦同学的博客
04-01 1265
文件上传
Node实现文件（图片、音/视频等）上传
自酌一杯酒
12-02 1904
node文件上传完整代码。使用 multer 中间件 来储存上传的文件，支持自定义保存到哪个文件目录下
如何在 NodeJs 中上传、处理和存储文件：分步手册
我的博客，不一样的自我表达
07-03 691
对于大多数应用程序，我上面分享的内容就足够了。对于少数人来说，需要更多的自定义，例如从同一字段上传多个文件，或从不同字段但相同表单上传多个文件。关注我的博客，您将在其中获得提示、技巧和挑战，以保持您的技能敏锐。记得关注我哦！
node模块之formidable
weixin_43003949的博客
06-07 1686
作用：解析表单，支持get请求参数，post请求参数、文件上传 原本使用的body-parser模块无法对包含文件的二进制上传表单加以处理 所以需要使用该模块 模块使用示例 具体实例 const path = require('path'); //因为文章表单里面包含上传的文件 （文章封面） //req.body无法获取包含文件的二进制表单 //所以要使用formidable模块 //1.引入模块 const formidable = require('formidable'); module.expor
node.js模块--formidable
热门推荐
charlene0824的博客
04-24 1万+
formidable模块实现了上传和编码图片和视频。它支持GB级上传数据处理，支持多种客户端数据提交。有极高的测试覆盖率，非常适合在生产环境中使用。安装方法这是一个低版本的包，如果在开发中使用高版本的框架（如Express），formidable模块已经包含在框架中。具体用法参考：讨论。通过npm安装：npm install formidable@latest formidable模块的方法和属性
【Nodejs】文件上传
DomCode
07-26 851
在目录下创建const uploadAvatar = require('../multer/upload') // 用户的逻辑控制器 const UserController = {// 头像图片上传 async upload(req , res) {try {meta : {code : 200 , msg : '上传成功！上述代码主要是编写了一个用户控制器类，以及一个图片上传的方法upload。在upload中调用了上传图片的接口，得到成功或失败的结果，在响应给客户端。// 导入用户逻辑。
node服务器上传下载文件
iiiiittttttt的博客
05-22 251
nodejs实现文件的上传下载
node-formidable详解
远古大猛犸
10-10 4664
node-formidable详解
node实现大文件断点上传
05-13
大文件的断点上传主要是利用HTTP协议的Range请求头来实现，其中Range请求头用于指定请求的数据范围，可以用于服务器响应部分内容或者支持分块下载。通过Range请求头，客户端可以在上传文件时只上传文件的某个部分，或者在上传过程中出现中断后可以继续从中断处继续上传。 以下是用Node.js实现大文件断点上传的示例代码： ```javascript const fs = require('fs'); const http = require('http'); const FILE_PATH = '/path/to/large/file'; const PORT = 3000; const server = http.createServer((req, res) => { if (req.url === '/upload') { const range = req.headers.range; if (range) { const parts = range.replace(/bytes=/, '').split('-'); const start = parseInt(parts[0], 10); const end = parts[1] ? parseInt(parts[1], 10) : fs.statSync(FILE_PATH).size - 1; const chunkSize = (end - start) + 1; const fileStream = fs.createReadStream(FILE_PATH, { start, end }); res.writeHead(206, { 'Content-Range': `bytes ${start}-${end}/${fs.statSync(FILE_PATH).size}`, 'Accept-Ranges': 'bytes', 'Content-Length': chunkSize, 'Content-Type': 'application/octet-stream' }); fileStream.pipe(res); } else { const fileStream = fs.createReadStream(FILE_PATH); res.writeHead(200, { 'Content-Length': fs.statSync(FILE_PATH).size, 'Content-Type': 'application/octet-stream' }); fileStream.pipe(res); } } }); server.listen(PORT, () => { console.log(`Server running at http://localhost:${PORT}/`); }); ``` 在客户端实现文件上传时，需要分段上传每个文件分片，并记录当前上传进度。如果上传过程中出现中断，可以记录已上传的分片，下次继续上传时从中断处继续上传。以下是客户端实现文件上传的示例代码： ```javascript const fs = require('fs'); const http = require('http'); const path = require('path'); const FILE_PATH = '/path/to/large/file'; const CHUNK_SIZE = 1024 * 1024; // 1MB const PORT = 3000; let uploadedBytes = 0; let totalBytes = fs.statSync(FILE_PATH).size; let fileStream; const uploadChunk = (start, end) => { const options = { hostname: 'localhost', port: PORT, path: '/upload', method: 'POST', headers: { 'Content-Type': 'application/octet-stream', 'Content-Length': end - start + 1, 'Content-Range': `bytes ${start}-${end}/${totalBytes}` } }; const req = http.request(options, (res) => { if (res.statusCode === 200 || res.statusCode === 206) { uploadedBytes += end - start + 1; console.log(`Uploaded ${uploadedBytes} bytes of ${totalBytes} bytes`); if (uploadedBytes === totalBytes) { console.log('Upload complete!'); } else { uploadNextChunk(); } } else { console.error(`Error uploading chunk ${start}-${end}: ${res.statusCode} ${res.statusMessage}`); } }); fileStream.pipe(req); }; const uploadNextChunk = () => { if (uploadedBytes === totalBytes) { return; } const start = uploadedBytes; const end = Math.min(start + CHUNK_SIZE - 1, totalBytes - 1); console.log(`Uploading chunk ${start}-${end}`); fileStream = fs.createReadStream(FILE_PATH, { start, end }); uploadChunk(start, end); }; const startUpload = () => { console.log(`Starting upload of ${path.basename(FILE_PATH)} (${totalBytes} bytes)`); uploadNextChunk(); }; startUpload(); ``` 注意，以上代码只是示例代码，实际项目中还需要考虑错误处理、性能优化、安全性等问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值