node+express+ multer 实现文件上传入门
文件上传
文件上传需要借助一个中间件 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 实现文件上传入门的更多相关文章
- node使用multer进行文件上传
开场白 在平时的业务中,我们很多使用都会有文件上传这个功能. 今天分享一下使用 node+element-ui实现一下文件上传. 请个人大佬指点一番~~~.批评的时候稍微轻一点. 毕竟我心里承受能力弱 ...
- node.js中 express + multer 处理文件上传
multer中间件,可以很方便的结合express处理用户表单上传的文件. 一.安装multer npm install multer 二.处理单个文件上传 const express = requi ...
- Nodejs进阶：基于express+multer的文件上传
关于作者 程序猿小卡,前腾讯IMWEB团队成员,阿里云栖社区专家博主.欢迎加入 Express前端交流群(197339705). 正在填坑:<Nodejs学习笔记> / <Expre ...
- node.js使用express框架进行文件上传
关于node.js使用express框架进行文件上传,主要来自于最近对Settings-Sync插件做的研究.目前的研究算是取得的比较好的进展.Settings-Sync中通过快捷键上传文件,其实主要 ...
- 使用Node.js的Express框架进行文件上传
我们先创建一个Express项目,要使用文件上传的功能还需要下载multer模块. npm install --save multer 下面我们在public文件夹下创建upload.html,内容如 ...
- nodejs+multer+ajax文件上传
前端 html代码 + ajax代码 form表单(无需指定action) <form enctype="multipart/form-data" method=" ...
- NodeJS学习笔记 进阶 (4)基于express+muter的文件上传(ok)
个人总结:这篇文章主要讲了multer插件的使用,类似于formidable,可以用来处理post表单中的文件上传,读完这篇文章需要10分钟. 摘选自网络 概览 图片上传是web开发中经常用到的功能, ...
- express 4.x 文件上传
1.安装文件上传模块: npm install multiparty --save 2.在routes/index.js 中添加: // 引用模块 let multiparty = require(& ...
- express 模板 及 文件上传
express 的三大功能: 1. 提供了静态服务(所谓的根目录) let express = require("express"); let app = express(); a ...
- express + multer 文件上传入门
写在前面的 在web开发中,我们经常会遇到图片上传的功能,接下来我们就在express4.15.0框架中利用multer1.3.0模块来实现图片上传 开始敲代码 首先利用express-generat ...
随机推荐
- vue2.x老项目typescript改造过程经验总结
前言: 关于Vue2.x 的TS改造,其实没有啥好说的. 对于vue-cli项目来说,从新跑一遍 vue create xxx-project ,选择Manually select features ...
- 在线就能用的 SQL 练习平台（附SQL学习文档）
对大数据和数据分析感兴趣的同学,如何入门一直是一个大问题. 而对于找工作的同学,笔试和面试环节也一直是一个让人头疼的问题. 其实企业也很头疼,不进行笔试,怕被面试者忽悠.进行笔试可能又把某些大牛筛出去 ...
- 阿里云视频云vPaaS低代码音视频工厂：极速智造，万象空间
当下音视频技术越来越广泛地应用于更多行各业中,但因开发成本高.难度系数大等问题,掣肘了很多企业业务的第二增长需求.阿里云视频云基于云原生.音视频.人工智能等先进技术,提供易接入.强拓展.高效部署和覆盖 ...
- FOR ALL ENTRIES IN 与 INNER JOIN 内表
1.区别 FOR ALL ENTRIES IN 与 INNER JOIN 内表,目的都是通过内表找数据库表与之对应的数据,但是有区别. 1.1.写法 FOR ALL ENTRIES IN " ...
- ABAP 内表与JSON转换
一.内表转JSON "-----------------------------@斌将军----------------------------- TYPES: BEGIN OF ty_na ...
- Blazor实现菜单动画
想到动画,你可能会去安装Blazor的动画组件BlazorAnimate,然后使用它.本人初学,暂时我也不知道原理,先不用组件,自己实现吧.虽然项目中我用了AntDesignBlazor,但是我忘了使 ...
- 例题 5-7 丑数(Ugly Numbers，UVa 136)
题意: 丑数是一些因子只有2,3,5的数.数列1,2,3,4,5,6,8,9,10,12,15--写出了从小到大的前11个丑数,1属于丑数.现在请你编写程序,找出第1500个丑数是什么. 思路: 如果 ...
- SQL常用日期格式化转换与百分数转换
目录 SQL将小数转为保留两位的百分数 常用的日期格式化 补充: 秒/毫秒转为持续时间 常用拼接方式: 本篇开启数据库在工作中常用到的格式转换与工具,欢迎大家评论留言 SQL将小数转为保留两位的百分数 ...
- 玩转AIGC，5分钟 Serverless 部署 Stable Diffustion 服务
有没有一种可能,其实你早就在AIGC了?阿里云将提供免费Serverless函数计算产品资源,邀请你,体验一把AIGC级的毕加索.达芬奇.梵高等大师作画的快感.下面请尽情发挥你的想象空间!!双重奖品设 ...
- 【驱动】以太网扫盲（三）PHY的控制器驱动框架分析
1. 概述 PHY芯片为OSI的最底层-物理层(Physical Layer),通过MII/GMII/RMII/SGMII/XGMII等多种媒体独立接口(介质无关接口)与数据链路层的MAC芯片相连,并 ...