返回顶部
首页 > 资讯 > 前端开发 > node.js >node文件上传功能简易实现代码
  • 651
分享到

node文件上传功能简易实现代码

简易文件上传代码 2022-06-04 17:06:28 651人浏览 薄情痞子
摘要

找了不少文件上传的相关模块,最后选择了比较常用,并且是express推荐使用的 multer 来实现文件上传,附上 GitHub 地址 1. 开始 开始第一步,自然就是安装模块,不多说 npm in

找了不少文件上传的相关模块,最后选择了比较常用,并且是express推荐使用的 multer 来实现文件上传,附上 GitHub 地址

1. 开始

开始第一步,自然就是安装模块,不多说


npm install multer --save

这里简单说一下,因为文件上传是用 post 方法提交数据,所以上传的单文件或者多文件会作为一个 body 体添加到请求对象中,我们可以通过 req.file 或者 req.files 查看上传后文件的相关信息。

以单文件上传为例,req.file 返回一个对象:


{
   "fieldname":"avatar",  #前端上传文件input的name
   "originalname":"Wx.PHP",  #本地文件名
   "encoding":"7bit",  #文件编码类型
   "mimetype":"text/php",  #文件类型
   "destination":"uploads/",  #上传根目录
   "filename":"1497286037422Wx.php",  #上传后文件名
   "path":"uploads/1497286037422Wx.php",  #文件路径
   "size":18174  #文件大小
}

该对象的 key 值是固定的,velue 值根据配置生成,用于实现相关逻辑

2. 实现

实现分两部分,前端和后端

前端

前端就是普通的写法,fORM 表单提交


<form action="/test/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="avatar">
  <input type="submit" name="提交">
</form>

切记,enctype="multipart/form-data" 这个属性一定要加上,否则后台接收不到文件。

后端

首先我们新建配置文件,upload.js


// upload.js

var multer = require('multer');  # 引入模块

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/')
  },
  filename: function (req, file, cb) {
    cb(null, Date.now()+file.originalname)
  }
})

var upload = multer({ storage: storage })

module.exports = upload;

diskStorage方法相当于创建一个磁盘存储引擎,配置文件上传路径,文件名等,可控性更高。


destination  # 设置文件上传路径
filename    # 重命名文件

然后新建路由接收文件,file.js


// file.js 

var express = require('express');
var router = express.Router();

// 引入配置文件
var upload = require('../config/upload');

router.post('/upload', upload.single('avatar'), function(req, res, next) {
  res.send(req.file);
});

module.exports = router;

file.js 中 upload.single() 方法表示接受单文件,常用的有


upload.single(fname);  // 接收单文件
upload.array(fname[, maxCount])  //接收多文件,maxCount表示接收最大数量

fname 是前端 <input type="file" name="fname"> 的 name 值

基本的上传文件方法就这些了,当然还有很多的配置参数之类的设置,要参考 gitHub 说明,地址在开头,需要者自行查阅

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: node文件上传功能简易实现代码

本文链接: https://lsjlt.com/news/12529.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • node文件上传功能简易实现代码
    找了不少文件上传的相关模块,最后选择了比较常用,并且是express推荐使用的 multer 来实现文件上传,附上 GitHub 地址 1. 开始 开始第一步,自然就是安装模块,不多说 npm in...
    99+
    2022-06-04
    简易 文件上传 代码
  • JavaWeb 文件的上传和下载功能简单实现代码
    一、文件的上传和下载1、文件上传的原理分析     1、文件上传的必要前提:          a、提供for...
    99+
    2023-05-31
    java web 文件上传
  • C#实现文件上传功能代码分享
    本篇内容介绍了“C#实现文件上传功能代码分享”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!实现按日期命名C#文件上传代码如下:private...
    99+
    2023-06-18
  • Servlet实现简单文件上传功能
    本文实例为大家分享了Servlet文件上传的具体代码,供大家参考,具体内容如下两点要素: 表单提交方式必须是post 2.enctype一定要是multipart/form-data。 enctype的默认值是application/x-w...
    99+
    2023-05-30
    servlet 文件上传 实现简单
  • JavaWeb实现简单上传文件功能
    本文实例为大家分享了JavaWeb实现上传文件功能的具体代码,供大家参考,具体内容如下 基本思想:网站服务器的内部除了有Web应用,还有文件系统,客户端向网站上传文件就是将文件以流的...
    99+
    2024-04-02
  • JavaWeb实现简单文件上传功能
    本文实例为大家分享了JavaWeb实现简单文件上传的具体代码,供大家参考,具体内容如下 1.概述 通常浏览器上传的所有参数,我们可以通过request对象的getParameter ...
    99+
    2024-04-02
  • JavaSpringBoot实现文件上传功能的示例代码
    测试代码 pom.xml: <xml version="1.0" encoding="UTF-8"> <project xmlns="http://maven.ap...
    99+
    2024-04-02
  • Spring Boot简单实现文件上传功能
    目录前言后端处理物理路径和虚拟路径映射前言 前端处理 通过form表单来上传文件提交方式为postenctype格式为"multipart/form-data"i...
    99+
    2024-04-02
  • node+socket实现简易聊天室功能
    本文实例为大家分享了node+socket实现简易聊天室的具体代码,供大家参考,具体内容如下 服务端 const net = require('net') const serv...
    99+
    2024-04-02
  • JavaWeb怎么实现简单上传文件功能
    这篇文章主要介绍了JavaWeb怎么实现简单上传文件功能的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇JavaWeb怎么实现简单上传文件功能文章都会有所收获,下面我们一起来看看吧。基本思想:网站服务器的内部除了...
    99+
    2023-07-02
  • JavaWeb怎么实现简单文件上传功能
    这篇文章主要讲解了“JavaWeb怎么实现简单文件上传功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaWeb怎么实现简单文件上传功能”吧!1.概述通常浏览器上传的所有参数,我们可以...
    99+
    2023-07-02
  • Vue实现文件切片上传功能的示例代码
    目录流程简说获取文件的 MD5 唯一标识码文件切片获取文件名 name分片文件大小 chunkSize文件切片 chunkList 列表切片总数 chunks切片大小 size合并在...
    99+
    2022-11-13
    Vue文件切片上传 Vue文件切片
  • java实现文件夹上传功能实例代码(SpringBoot框架)
    目录前言一、前端如何设置上传组件并将资源上传到后台服务1)首先我们需要新建一个用来提交文件夹的form表单2)然后我们添加自己框架内的一些按钮来触发该隐藏的表单二、后台如何接收处理文...
    99+
    2023-05-14
    springboot文件夹上传 springboot 文件上传 上传文件 springboot
  • JSP实现文件上传功能
    本文实例为大家分享了JSP实现文件上传功能的具体代码,供大家参考,具体内容如下 一、准备部分 需要fileupload.jar与io.jar包共同完成。构建完成路径后可继续。 资源地...
    99+
    2024-04-02
  • springmvc实现文件上传功能
    一个简单的springmvc文件上传例子 所需的依赖 只需要这个就好了。在idea的依赖关系图中,commons-fileupload包含了commons-io依赖 <d...
    99+
    2024-04-02
  • ASP.NET实现文件上传功能
    本文实例为大家分享了ASP.NET实现文件上传功能的具体代码,供大家参考,具体内容如下 1、搭建网站结构 2、编写网页文件 创建一个Web窗体UploadFile和UpFile文件...
    99+
    2024-04-02
  • javaweb实现文件上传功能
    本文实例为大家分享了javaweb实现文件上传的具体代码,供大家参考,具体内容如下 1、创建一个空项目 2、新建一个web application 的Module 3、创建一个lib...
    99+
    2024-04-02
  • JavaWeb实现上传文件功能
    本文实例为大家分享了JavaWeb实现上传文件的具体代码,供大家参考,具体内容如下 这是需要使用到的两个jar包一定要导入到lib目录中,并添加到发布的lib目录下 index.j...
    99+
    2024-04-02
  • SpringBoot实现文件上传功能
    经典的文件上传 服务器处理上传文件一般都是先在请求中读取文件信息,然后改变名称保存在服务器的临时路径下,最后保存到服务器磁盘中。本次以thymeleaf搭建demo,因此需要引入th...
    99+
    2024-04-02
  • ajaxfileupload.js实现上传文件功能
    下面是一个使用ajaxfileupload.js实现文件上传功能的示例代码:首先,你需要引入ajaxfileupload.js文件,...
    99+
    2023-08-11
    功能
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作