首页 > 编程语言 >node+express+ multer 实现文件上传入门

node+express+ multer 实现文件上传入门

时间:2023-01-18 22:35:46浏览次数:39  
标签:node 文件 express upload multer file var 上传

文件上传

文件上传需要借助一个中间件 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,upload,multer,file,var,上传
From: https://www.cnblogs.com/IwishIcould/p/17060764.html

相关文章

  • JavaScript精简(基于node.js)
    目录1、基本语法2、变量3、数据类型3.1、数字型Number3.2、字符串类型String3.3、布尔型Boolean3.4、Undefined、Null3.5、获取变量的数据类型3.6、数据类型的转化4、运......
  • nodejs 导出excel
    window.export=function(){layer.msg(MOD_PAGE_PATH+'/export');window.location=MOD_PAGE_PATH+'/export'......
  • 千锋Node.js学习笔记
    千锋Node.js学习笔记目录千锋Node.js学习笔记写在前面1.认识Node.js2.NVM3.NPM4.NRM5.NPX6.模块/包与CommonJS7.常用内置模块1.url2.querystring3.http4.跨域j......
  • node:internal/modules/cjs/loader:959 throw err; ^解决方法
    在配置mongosh时出现的意外情况,由于在系统路径中有空格,导致系统中不断出现node:internal/modules/cjs/loader:959throwerr;^的错误,后检查发现为系统环境变量中未加......
  • Windows安装使用npm(Nodejs)
    1.下载Nodejs​​​https://nodejs.org/en​​2.傻瓜式的安装,路径可以自己更改3.配置NODE_PATH环境变量(安装自动配置路径)4.安装好后,对应的各个文件的作用:检查是否正常先......
  • node_exporter安装
    1、node_exporter下载node_exporter-1.3.1.linux-amd64.tar.gztar -xzvf node_exporter-1.3.1.linux-amd64.tar.gz -C /usr/local 2、配置文件 cat >/etc/sys......
  • LeetCode Top 100 Liked Questions 10.Regular Expression Matching (Java版; Hard)
    ​​welcometomyblog​​LeetCodeTop100LikedQuestions10.RegularExpressionMatching(Java版;Hard)题目描述Givenaninputstring(s)andapattern(p),im......
  • node版本管理工具——nvm
    在项目开发过程中,由于各种前端框架、插件以及nodejs、npm的飞速更新,在项目新开发或对老项目进行更新维护时,有些项目版本的配置和当前node环境不匹配,导致运行报错,甚......
  • node-sass安装问题
    前情最近在开发一个小程序项目,为了开发速度,部分页面使用原有H5,但原有H5需要对小程序做一定兼容适配,发现原有H5项目是个很古老项目。坑位在项目启动前,需要执行npminst......
  • Node Sass7.0.1版本与^4.0.0不兼容:解决
    今天碰到了个很麻瓜的问题我的node是16的里面的NodeSass7.0.1版本比较高跑老项目不兼容,卸载重装,但是安装NodeSass4.0.0失败,奇怪了还好找到一个文章上d1.npmuninstall......