文件上传

文件上传需要借助一个中间件 multer

因此我们需要安装 cnpm install multer --save

前端界面

在express创建的项目下的 public/upload目录下创建 indexfileupload.html

如果你没有需要进行创建对应的文件

然后再地址栏输出  http://127.0.0.1:666/upload/indexfileupload.html

可以显示下下面对应的界面

indexfileupload.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>文件上传</title>

</head>

<body>

  <form action="/upload/upload" method="post" enctype="multipart/form-data">

    <input type="file" name="logo2"> <br />

    <input type="submit" value="文件上传">

  </form>

</body>

</html>

indexfileupload.html文件的注意点

1===》action="/upload/upload" 表示的是接口地址。

因为这里前后端没有分离，因此不需要写最前面的地址

2==》method="post" 表示的是请求的方式

3==》enctype="multipart/form-data" 文件上传的固定格式

4==》<input type="file" name="logo2">  中的file表示文件。

name="logo2"  需要与 后端的 upload.single('name') 与之对应

router.post('/upload', upload.single('logo2'), (req,res) => {

  var file = req.file

  res.send({ code:'0', msg:'上传成功'})

})

后端代码-在routes目录下创建 fileupload.js文件

var express = require('express')

var router = express.Router()

// 引入文件模块

var fs = require('fs')

// 引入路径模块

var path = require('path')

// 后端处理文件的模块

var multer=require('multer')

// 配置路径和文件名

var storage = multer.diskStorage({

  //上传文件到服务器的存储位置

  destination: 'public/upload',

  filename: function (req, file, callback) {

    console.log('file', file) //上传的文件信息

    var fileFormat = (file.originalname).split('.')

    var filename = new Date().getTime()

    callback(null, filename+"."+fileFormat[fileFormat.length-1])

  }

})

var upload = multer({

  storage

})

//接口

router.post('/upload', upload.single('logo2'), (req,res) => {

  var file = req.file

  res.send({ code:'0', msg:'上传成功'})

})

//导出

module.exports = router;

在app.js中注册使用路由

// 引入

var uploadRouter = require('./routes/fileupload');

//使用

app.use('/upload', uploadRouter);


在浏览器中输入http://127.0.0.1:666/upload/indexfileupload.html

然后选择对应的文件，然后点击文件上传按钮，就可以实现文件上传成功了

node+express+ multer 实现文件上传入门的更多相关文章

  1. node使用multer进行文件上传

    开场白 在平时的业务中,我们很多使用都会有文件上传这个功能. 今天分享一下使用 node+element-ui实现一下文件上传. 请个人大佬指点一番~~~.批评的时候稍微轻一点. 毕竟我心里承受能力弱 ...

  2. node.js中 express + multer 处理文件上传

    multer中间件,可以很方便的结合express处理用户表单上传的文件. 一.安装multer npm install multer 二.处理单个文件上传 const express = requi ...

  3. Nodejs进阶：基于express+multer的文件上传

    关于作者 程序猿小卡,前腾讯IMWEB团队成员,阿里云栖社区专家博主.欢迎加入 Express前端交流群(197339705). 正在填坑:<Nodejs学习笔记> / <Expre ...

  4. node.js使用express框架进行文件上传

    关于node.js使用express框架进行文件上传,主要来自于最近对Settings-Sync插件做的研究.目前的研究算是取得的比较好的进展.Settings-Sync中通过快捷键上传文件,其实主要 ...

  5. 使用Node.js的Express框架进行文件上传

    我们先创建一个Express项目,要使用文件上传的功能还需要下载multer模块. npm install --save multer 下面我们在public文件夹下创建upload.html,内容如 ...

  6. nodejs+multer+ajax文件上传

    前端 html代码 + ajax代码 form表单(无需指定action) <form enctype="multipart/form-data" method=" ...

  7. NodeJS学习笔记 进阶 (4)基于express+muter的文件上传(ok)

    个人总结:这篇文章主要讲了multer插件的使用,类似于formidable,可以用来处理post表单中的文件上传,读完这篇文章需要10分钟. 摘选自网络 概览 图片上传是web开发中经常用到的功能, ...

  8. express 4.x 文件上传

    1.安装文件上传模块: npm install multiparty --save 2.在routes/index.js 中添加: // 引用模块 let multiparty = require(& ...

  9. express 模板 及 文件上传

    express 的三大功能: 1. 提供了静态服务(所谓的根目录) let express = require("express"); let app = express(); a ...

  10. express + multer 文件上传入门

    写在前面的 在web开发中,我们经常会遇到图片上传的功能,接下来我们就在express4.15.0框架中利用multer1.3.0模块来实现图片上传 开始敲代码 首先利用express-generat ...

随机推荐

  1. Python图像处理丨图像缩放、旋转、翻转与图像平移

    摘要:本篇文章主要讲解Python调用OpenCV实现图像位移操作.旋转和翻转效果,包括四部分知识:图像缩放.图像旋转.图像翻转.图像平移. 本文分享自华为云社区<[Python图像处理] 六. ...

  2. 创建一个科学决策必备的A/B实验，都需要哪些准备？——火山引擎 DataTester 使用指南

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流 DataTester 是火山引擎数智平台旗下产品,能基于先进的底层算法,提供科学分流能力和智能的统计引擎,支持多种复 ...

  3. Linux 堡垒机命令行中如何上传下载文件（SecureCRT - SFTP）

    通过堡垒机进入的 Linux 操作系统,无法直接使用 WinSCP 等工具进行文件的上传下载. 可使用 SecureCRT 先进入命令行模式 配置 配置 Linux 堡垒机的连接方式 连接 选择要进入 ...

  4. Java 四种引用类型（强引用、软引用、弱引用、虚引用）

    概述 Java 中的引用类似 C 语言中的指针,指向一个对象,比如: // person 就是指向 Person 实例"张三"的引用 Person person = new Per ...

  5. 熔断、限流、降级 —— SpringCloud Alibaba Sentinel

    Sentinel 简介 Sentinel 是阿里中间件团队开源的,面向分布式服务架构的高可用流量防护组件,主要以流量为切入点,从限流.流量整形.熔断降级.系统负载保护.热点防护等多个维度来帮助开发者保 ...

  6. 玩转Python：在Python中处理表格数据，几个非常流行且功能强大的库

    在Python中处理表格数据,有几个非常流行且功能强大的库.以下是一些最常用的库及其示例代码: 1. Pandas Pandas是一个开放源代码的.BSD许可的库,为Python编程语言提供高性能.易 ...

  7. golang chan传递数据的性能开销

    这篇文章并不讨论chan因为加锁解锁以及为了维持内存模型定义的行为而付出的运行时开销. 这篇文章要探讨的是chan在接收和发送数据时因为"复制"而产生的开销. 在做性能测试前先复习 ...

  8. 【MFC】CListCtrl 如何设置单元格颜色？

    CListCtrl默认可设置的内容很少,如单元格颜色默认无法设置.若想设置单元格颜色,需要对CListCtrl进行拓展,已有老外为我们写好demo,这里对其中原理.设置方法进行一个解析. 其原理是:设 ...

  9. 图解 Promise 实现原理（一）—— 基础实现

    本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/UNzYgpnKzmW6bAapYxnXRQ作者:孔垂亮 很多同学在学习 Promise 时,知 ...

  10. 分库分表Sharding-JDBC + MyBatis-Plus动态表名

    MyBatis-Plus动态表名 1: https://blog.csdn.net/Zack_tzh/article/details/107529746?utm_medium=distribute.p ...