最近在研究node后端的图片数据的上传、保存和转发，可以实现直接将图片保存在服务器本地（而非数据库）
这里我们需要在前端上传一个图片，之后在服务器的某个文件夹保存这个图片，并重命名
之后前端发送特定的服务，我们可以在文件夹中找到对应的图片并返回给前端
一、服务构建
在本地8000端口起一个前端服务（在本例中用的umi框架）
并在本地3333接口起一个后端服务（在本例中使用node，详情见第三节）
二、前端上传实现
前端随便使用上传组件或者手动写axios请求就可以，只要能实现把一张图片流发送到指定服务就行（一定要保证是通过二进制传输）。
这里用umi框架，用antd的upload上传组件举例
const beforeUpload = (file) => {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJpgOrPng) {
message.error('You can only upload JPG/PNG file!');
}
return isJpgOrPng;
}
const getBase64 = (img, callback) => {
const reader = new FileReader();
reader.addEventListener('load', () => callback(reader.result));
reader.readAsDataURL(img);
}
const handleChange = (info) => {
if (info.file.status === 'uploading') {
setLoading(true)
return;
}
if (info.file.status === 'done') {
// Get this url from response in real world.
getBase64(info.file.originFileObj, imageUrl => {
setLoading(false)
setImageUrl(imageUrl)
});
}
};
const uploadButton = (
<div>
{loading ? <LoadingOutlined /> : <PlusOutlined />}
<div style={{ marginTop: 8 }}>Upload</div>
</div>
);
return (
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG"
name="avatar"
method='post'
listType="picture-card"
className="avatar-uploader"
showUploadList={false}
action={`//localhost:3333/backend/image`}
beforeUpload={beforeUpload}
onChange={handleChange}
>
{imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
</Upload>
</div>
);
}
需要注意的是这里设置的上传地址，会涉及到跨域问题（从localhost：8000跨域到localhost：3333）那么需要配置一下跨域的代理
三、后端实现
现在来写后端入口文件app.js，首先搭建基础的node服务端监听3333端口
var express = require('express');
var fs = require('fs');
var http = require('http');
const router = require('./router/index') // 引入路由
var app = express();
//设置跨域访问
app.all('*', (req, res, next) => {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By", ' 3.2.1');
res.header("Content-Type", "application/json;charset=utf-8");
next();
});
// 使用路由 /index 是路由指向名称
app.use(`/backend`, router)
var httpsServer = http.createServer(app);
httpsServer.listen(3333, function () {
console.log('正在监听3333接口')
});这段代码有三部分需要解释一下：
（1）
这一段是设置跨域，对于所有的服务，都会在前面加上额外的请求头，设置Access-Control-Allow-Origin为*即所有域都可以访问
（2）
这一段是我们的后端服务，当需要访问backend这个应用下的某个服务的时候，node会在router里面找（router在代码第四行已经定义，在另一个文件夹，这样是为了把后端backend这个应用给区分开来）
（3）
最近监听当前所在域的3333端口，在本地跑就是localhost:3333
之后我们在当前文件夹下面新建一个文件夹名叫router，并在下面新增一个index.js和另一个文件夹files(files原来存取前端上传上来的图片）
router 后端服务文件夹
├─files 存放我们图片的文件夹
├─index.js 后端服务
utils 一些全局方法(不用管)
app.js 后端入口文件
（app.js即我们刚刚的入口文件，router即我们的后端backend服务）
再打开router文件夹，在其中的index.js中写我们的后端服务
const express = require(`express`)
const router = express.Router()
router.post("/image", function (req, res) {
res.json({
success: true
})
})
module.exports = router当我们发送post服务 http://localhost:3333/backend/image 之后，会返回给我们一个success:true
试了一下，服务是跑通了，但是我们怎么去获取到这个图片？怎么去保存下来呢？服务是通过二进制流传输的图片，我们怎么去解析这个二进制并保存下来呢？
这就需要请出我们本文的主角了formidable
formidable简而言之是一个可以在node使用的表单处理器，而且他支持直接将二进制转换成实际的文件
（使用前，需要执行npm install formidable，并且在index.js头部增加这一行）
var formidable = require('formidable');之后，我们创建一个formidable的表单解析对象，并对这个对象的储存路径进行变更
const express = require(`express`)
const router = express.Router()
router.post("/image", function (req, res) {
const form = new formidable.IncomingForm();//创建解析对象
form.uploadDir = __dirname + "/files/";// 指定解析对象（图片）存放的目录
form.keepExtensions = true//保留后缀名
form.parse(req, function (err, fileds, files) {
res.json({
success: true
})
})
})
module.exports = router这里的form.parse就是对表单数据进行处理，但是这里只有一个表单项（就是我们刚刚上传的图片）form.parse中的files就是我们的图片数据了
这样的话，文件会保存在当前目录下的files文件夹中，并保留后缀
我们来实操一下，首先上传一张菈妮的图片，可以看到服务是ok的，返回了一个success:true
但是我们查看文件夹，会发现是这样的
既没有名字，也没有后缀名（如果现在手动在文件后面加.jpg发现是可以的）
这是因为文件是二进制传输，没有告诉后端这个文件的名字和扩展名，所以才有这样的问题，但文件本身是没有问题的，只是命名的问题
那么我们需要给文件重命名，并且在命名后面加上对应的文件扩展名
我们首先看一下form的file信息
我们可以发现在form.parse后files中的avatar有文件的所有属性（包括本身的名字等等，和文件的扩展名）
那么我们可以通过node中的文件读写fs来进行一次文件重命名（可以扩展阅读一下fs的rename函数）
//通过fs更改文件名
fs.rename(files.avatar.filepath, generateFilename(oldFilename, files.avatar.originalFilename), err => {
if (err) {
console.log("重命名失败");
console.log(err);
} else {
console.log(`已经保存为${generateFilename(oldFilename, files.avatar.originalFilename, files.avatar.filepath)}`);
}
})这里第一个参数是文件的位置，第二个参数是通过我们自定义的一个函数generateFilename来将文件重命名,第三个是rename之后的回调
对于generateFilename，需要注意的是从命名后需要在前面加上路径，否则fs会自动将文件重新移回当前文件夹，而不是我们想要的files文件夹
const generateFilename = (oldFilename, originalFilename, path) => {
let names = originalFilename.split(".");
path = path.replace('invalid-name', '')
return `${path}${names[0]}_${id}.${names[1]}`;
}再试一次，好了，而且也加上扩展名了
四、通过url参数详细命名我们的文件
但是这样肯定是不完美的，首先是我们的这些图片没有用户信息，这样很难分辨是谁上传的图片...而且上传的图片只是有一个图片名,我们想要图片名按某种格式（用户id-用户name-日期）这样的命名，应该怎么做呢？
（1）解决方法一：在前端创建一个表单
因为formidable本身就是一个表单处理器，我们可以创建多个表单之后一起从前端通过一个服务传过来，让用户在表单中填写id信息等等，这也是一个大多数的解决方案（特别是不需要用户注册的问卷类型的页面）
之后，在后端通过form.parse处理表单项，form.parse中有三个参数err、fileds、files
对于普通的表单项，我们就读fileds就可以了，对于文件格式的表单项（比如我们刚刚的files）也可以单独处理
这个解决方法相信大家都轻车熟路了，表单谁不会写啊，举个手让大家笑话一下
（2）解决方法二：通过url传递
这里是通过在服务url中包含用户的信息，之后在后端解析出来，并重命名，这个适合只传一张图，而不想麻烦用户传一个表单的情况，服务还是传递的图片的二进制流，其他信息就包含在url中，本文以这个为例
首先在前端将服务的发送url改一下
<Upload
accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG"
name="avatar"
method='post'
listType="picture-card"
className="avatar-uploader"
showUploadList={false}
action={`//localhost:3333/backend/image?id=${userData.id}&name=${userData.name}`}
beforeUpload={beforeUpload}
onChange={handleChange}
>
{imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
</Upload>（userData即用户信息）
之后我们在刚刚的服务中获取到这几个信息
router.post("/image", function (req, res) {
console.log(req.url)
let id = geturlparam(req.url, 'id')
let name = geturlparam(req.url, 'name')
...
});geturlparam是一个全局方法
//获取url参数
const geturlparam = (url, name) => {
let p = url.split('?')[1]
let keyValue = p.split('&');
let obj = {}
for (let i = 0; i < keyValue.length; i++) {
let item = keyValue[i].split('=');
let key = item[0];
let value = item[1];
obj[key] = value;
}
return decodeURIComponent(obj[name])
}
module.exports = geturlparam
（这里的decodeURIComponent(obj[name])是一个解码函数，我们其实可以发现发送的服务编码不是utf-8,这是因为编码格式只生效于我们的页面body，对于发送出去的请求我们无法编码，那么url参数想要传递中文的话，需要在后端这边重新解码一下）
之后，我们在更改的rename函数中，将generateFilename函数加入id和name这两个参数
fs.rename(files.avatar.filepath, generateFilename(oldFilename, files.avatar.originalFilename, files.avatar.filepath, id, name), err => {
if (err) {
console.log("重命名失败");
console.log(err);
} else {
console.log(`已经保存为${generateFilename(oldFilename, files.avatar.originalFilename, files.avatar.filepath, id, name)}`);
}
}) const generateFilename = (oldFilename, originalFilename, path, id, name) => {
let d = new Date();
let names = originalFilename.split(".");
path = path.replace('invalid-name', '')
return `${path}${name}_${id}_${"" + d.getFullYear() + (d.getMonth() + 1) + d.getDate() + '_' + d.getHours() + d.getMinutes() + d.getSeconds()}.${names[1]}`;
}最后运行一小，效果如下
第四张图的文件名中就包含了用户信息
五、前端获取到我们服务器上的图片
假如我想写一个get服务，获取某一个用户上传的文件怎么办？其实很简单，这里直接讲思路
（1）文件名已知
那么直接访问域下面的文件就可以了，后端读取参数，然后返回对应的url就可以了（但是需要提前将对应的文件集合路径挂载到服务上，不然访问不到）
（2）文件名未知
假如我只知道一个用户的名字，我想拿到对应的所有包含这个名字的所有图片该怎么做呢？方法也很简单：
1.前端发送一个get请求，请求中包含对应的参数
2.后端解析参数，通过fs.readdir方法获取某个文件夹的所有文件，这个方法会返回一个数组，数组中全是文件夹中的所有文件名字
3.遍历并找到要输出的文件
4.后端返回对应的url数组（这也需要提前将对应的文件集合路径挂载到服务上）
总结：
一般而言，还是把图片的base64码通过数据库持久化保存好一点，数据库不光可以保存更多数据，而且数据库可以自定义其他字段来保存数据。
但是有的时候，我们不想写复杂的sql，或者我们想快速拿到上传的文件，这个方法显然好的多：
这个解决方案适合轻量级的网站，而且是能直接用户上传图片就能直接拿到图片文件的，相对于数据库来说也简单快捷，甚至于可以直接对excel表格进行读写。
我们是通过formidable来处理文件二进制流，formidable是一个表单处理器，可以处理表单数据或者表单文件，并保存在特定的路径。
之后通过fs的rename方法重命名文件，或者直接扩展前端表单来获取其他数据。
需要注意的是，如果一个表单既包含文件又包含数据，需要在form的属性中配置enctype=“multipart/form-data”，因为表单数据即包含普通数据，又包含文件二进制流
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
