1、概念
文件上传
的具体内容
- 在
前端
让用户
发送(上传)图片,图片由后端(服务器)
接收,并转存到到服务端设备
上的操作 node.js
的文件上传功能
主要是使用:multer
插件实现的
- 搭建一个
图片上传
的接口
- 先让接口开通,再去做插件下载/配置等操作
- 我们确定请求路径是:
http://localhost:3000/upload
后,也就确定了可以访问得到响应数据
- 阅读multer文档
- 使用multer插件
- 注意
- 测试接口的时候,需要
前端
来完成接口的请求发送 - 浏览器直接发起请求这个事行不通,因为浏览器地址栏只能发起
get请求
,但是我们现在使用的请求方式是post请求
2、示例—核心代码
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var app = express();
app.set('views', path.join(__dirname, 'views'));
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
let routes = require("./routes");
app.use( routes );
app.use(function(req, res, next) {
next(createError(404));
});
app.use(function(err, req, res, next) {
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
3、示例—index
let router = require("express").Router();
let test = require("./test");
router.use( "/test" , test )
router.use("/upload" , require("./upload"));
module.exports = router;
4、示例—upload(单文件上传子路由)
图片上传路由 => 先测试路由通不通:添加一个get("/") 路由测试即可
let router = require("express").Router();
let multer = require("multer");
router.get("/" , ( req , res )=>{
res.send("upload功能路由!");
})
let upload = multer( { dest : "uploads/"} )
function handlerRes( req , res ){
let data = {
code : 1 ,
file : req.file ,
body : req.body
}
res.json(data)
}
router.post("/profile" , upload.single("avatar") ,handlerRes )
module.exports = router;
5、示例—前端文件上传页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件上传页面</title>
</head>
<body>
<h2>文件上传</h2>
<form action="/upload/profile" method="post" enctype="multipart/form-data" >
<input type="file" name="avatar">
<button>提交图片</button>
流程:
1)当提交按钮被点击时,请求就会向/upload/profile发送,并用post请求携带enctype...属性,
2)name中的字段是avatar,字段里的数据我们上传的图片数据
注意:
一定是在http://localhost:3000/这个服务器路径下打开的,/upload/profile是表示在http://localhost:3000直接拼接的
</form>
</body>
</html>