[Day4] Node.js利用Express实现上传单文件

本文链接：https://blog.csdn.net/zhs362625119/article/details/109139755

[Day4] Node.js利用Express实现上传单文件

文章目录

[Day4] Node.js利用Express实现上传单文件

要求

了解Express框架
了解JavaScript和html,CSS基础知识
了解node.js常用模块：express
了解multer中间件

环境

OS: Win10
Node.js: v12.19.0
Express: v4.17.1
Yarn: v1.22.10
Multer: v1.4.2
使用VScode IDE

原理

上传文件的from表单，则需要将form标签设置enctype="multipart/form-data"属性，是将Content-Type设置成multipart/form-data。默认类型是application/x-www-form-urlencoded，但是它不适合传输大型二进制数据，而multipart/form-data可以更有效的传输文件

文件上传本质上是一个POST请求。只不过请求头以及请求内容遵循一定的协议，请求头（Request Headers）中需要设置 Content-Type为 multipart/form-data; boundary=${boundary}

Multer

Multer is a node.js middleware for handling multipart/form-data, which is primarily used for uploading files. It is written on top of busboy for maximum efficiency.

NOTE: Multer will not process any form which is not multipart(multipart/form-data).

实战

NOTE: 基于Day3的工程，只列出变化的部分

index.html

更新index.html,引入from表单，action: /file/uploader,method: POST

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
			<title>Hello HTML</title>
			<link rel="stylesheet" type="text/css" href="/stylesheets/style.css" />
		</head>
		<body>
			<h3>单文件上传：</h3>
			选择一个文件上传: <br />
			<form action="/file/uploader" enctype="multipart/form-data" method="post">
				<input type="file" name="image" size="50" />
				<br />
				<button type="submit">上传</button>
			</form>
		</body>
	</head>
</html>

server.js

编写server.js，直接使用express的中间件托管静态文件目录,指定上传文件目录**/public/upload/**。实现POST API：/file/uploader。

var express=require("express");
var path=require("path");
var multer=require("multer");

var app=express();

const UPLOADPATH =path.join( __dirname , '/public/upload/');

app.use(multer({ dest: UPLOADPATH}).single('image'));
app.use(express.static('public'))
app.post("/file/uploader", function(req,res){
    console.dir(req.file);
    var resObj = {
        code: 1,
        des: '上传成功'
    };
    res.send(resObj);
})

module.exports = app;