项目中总会需要文件上传的功能，实现这个功能的时候，我有下面两个思路:

1. 将图片转为base64，再将base64码存入数据库，调用的时候直接渲染即可
2. 将图片上传到服务器作为静态资源暴露出来，再将图片的访问链接存入数据库，调用的时候使用该链接去访问

我们来分析一下上面两种方法:

1. 使用base64，可以减少http请求，获取请求结果后直接编码渲染，但是也有弊端，base64一般会比原图要大一些，且浏览器需要解码才能显示图片
2. 第二张方法获取请求结果后，需要将请求结果中的图片链接拿来，再发送请求，之后渲染图片

权衡利弊下，我选择了第二种方法进行图片上传

运行环境

node + express

依赖插件：Multer

Multer 是一个 node.js 中间件，用于处理 multipart/form-data 类型的表单数据（请求头”Content-Type”: “multipart/form-data;”），它主要用于上传文件。
Multer 会添加一个 body 对象 以及 file 或 files 对象 到 express 的 request 对象中。 body 对象包含表单的文本域信息，file 或 files 对象包含对象表单上传的文件信息。

废话不多说，直接贴代码

前端

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<input type="file" id="up" multiple />
<script>
	var up = document.getElementById("up")
	up.onchange = function(res) {
		let fs = up.files;
		var forms = new FormData()
		forms.append('file', fs[0])
		console.log(fs[0])
		axios({
			url: 'http://服务器地址:3000/upload',
			method: 'post',
			headers: {
				"Content-Type": "multipart/form-data;"
			},
			data: forms,
			success: (res) => {
				console.log(res)
			}
		}).then(res => {
			console.log(res)
		})
	}		
</script>

后台

const express = require('express')
const app = express()
const multer = require('multer')
const port = 3000 // 端口号

// 文件操作
const fs = require('fs')
const path = require('path')

// 使用multer插件，设置文件上传的路径
const upload = multer({
	dest: 'data/'
});

// 配置静态资源路径
app.use(express.static(path.join(__dirname, 'data')));

// 解决跨域
app.all('*', function(req, res, next) {
	res.header('Access-Control-Allow-Origin', '*');
	res.header('Access-Control-Allow-Headers', 'Content-Type');
	res.header('Access-Control-Allow-Methods', '*');
	res.header('Content-Type', 'application/json;charset=utf-8');
	next();
});

// 处理post图片上传上来的数据
app.post('/upload', upload.any(), function(req, res, next) {
	console.log(req.files[0]); // 上传的文件信息

	var des_file = "./data/" + req.files[0].originalname;
	// req.files[0].path即 multer设置的文件上传的路径
	fs.readFile(req.files[0].path, function(err, data) {
		fs.writeFile(des_file, data, function(err) {
			if (err) {
				console.log(err);
			} else {
				response = {
					message: 'File uploaded successfully',
					filename: req.files[0].originalname
				};
				console.log(response);
				res.send({
					data: JSON.stringify(response),
					info: "aaaa"
				});
				// 删除原来multer存的文件
				fs.unlinkSync(req.files[0].path)
			}
		});
	});
});

app.listen(port, () => console.log(`服务器启动成功，端口号为： ${port}!`))