使用 Multer 上传图片到阿里云 OSS

文件上传到哪里更好？

• 上传到服务器本地

上传到服务器本地，这种方法在现今商业项目中，几乎已经见不到了。因为服务器带宽，磁盘 IO
都是非常有限的。将文件上传和读取放在自己服务器上，并不是明智的选择。

• 上传到云储存

上传到云存储，则无需担心带宽和磁盘问题，而且配置 CDN
也很简单。所以明智的选择，要用云存储，这里我们以阿里云的对象存储为例来学习如何实现上传。

阿里云对象存储阿里云oss

上传的两种方式

我们需要开发，专门用于阿里云上传的接口。开发上传接口，也有两种方案，分别是服务端代理上传和客户端直传。这两种方式在开发、使用上各有优劣。我们简单的做个对比：

服务端代理上传

服务端代理上传。使用这种方式，一张图片，先要上传到 Node 项目的服务器中，然后再由 Node 服务器上传到阿里云 OSS。

这样这张图片，要上传两次，会造成网络资源的浪费，增加服务器的开销。尤其是在访问量大的情况下，会对项目的稳定运行，造成很大的影响。

但这种方式也有优点，就是开发简单、前端使用非常方便。而且后端可以很方便的做记录，可以开发一个专门用来，管理用户附件的功能。

1、获取秘钥

使用代码来访问阿里云，需要两个用来认证的参数。点击阿里云网站右上角用户头像里的AccessKey管理

从这里创建自己的阿里云的AccessKey。页面还会弹出使用 RAM 用户 AccessKey。
根据阿里云的提示，我们就选择使用 RAM 用户 AccessKey

然后通过验证

创建完成后，还需要对当前用户进行授权。勾选后，点击添加权限

关闭小窗口，回来看用户信息。这里还有两个非常关键的AccessKey ID和AccessKey Secret。先不要关闭页面，马上就要用到它们。
记得保存好： AccessKey Secret 后续无法查看

对当前项进行配置使其可以自由读 无需签名验证

2、配置环境变量

到这里为止，我们开发上传接口，所需要的东西已经全部拿到了。打开咱们开发的 Node.js 项目，找到.env文件，增加点配置。将自己的AccessKey ID和AccessKey Secret值复制进来。

后面的ALIYUN_BUCKET和ALIYUN_REGION，可以在概览中找到，我这里分别是：wlyxw-oss和oss-cn-chengdu。大家复制的时候，注意下，只要前面这一部分，后面的完整域名不需要。

.env

NODE_ENV=development
PORT=3000
SECRET=ALIYUN_ACCESS_KEY_ID=AccessKey 
ALIYUN_ACCESS_KEY_SECRET=AccessKey Secret
ALIYUN_BUCKET=wlyxw-oss
ALIYUN_REGION=oss-cn-chengdu

如果项目是启动状态，改完环境变量了，记得一定要重启服务。

3、 安装依赖包

npm i ali-oss multer multer-aliyun-oss

• ali-oss：是用来操作阿里云 OSS 的 SDK
• multer：是专门用于上传文件的 node.js 中间件
• multer-aliyun-oss，则是用来配合 multer，将文件上传到阿里云 OSS 的

4、实现上传代码

在/routes目录中新建一个路由文件，就叫做uploads.js。

uploads.js

const express = require('express');
const router = express.Router();
const { success, failure } = require('../utils/responses');/*** 阿里云 OSS 客户端上传* POST /uploads/aliyun*/
router.post('/aliyun', function (req, res) {try {} catch (error) {failure(res, error);}
})module.exports = router;

接着查看 multer-aliyun-oss的文档。可以看到这里的代码还是比较简单的，上面需要先做一个配置，然后调用方法就可以上传了。

但这里缺少对上传文件的验证，我们继续看 multer的官方文档。看到这里可以通过参数限制文件大小和文件类型。在它们的基础上，我们做一个整合，就得到了这样一个配置文件。

因为这些配置，内容比较多，而且将来会在多个不同的路由文件中使用。考虑到代码的干净和复用，就不要将它们直接放在路由文件里了。可以在utils里，新建一个aliyun.js文件，将它们直接粘贴进去。

aliyun.js

const multer = require('multer');
const MAO = require('multer-aliyun-oss');
const OSS = require("ali-oss");
const {BadRequest} = require('http-errors')// 阿里云配置信息
const config = {region: process.env.ALIYUN_REGION,accessKeyId: process.env.ALIYUN_ACCESS_KEY_ID,accessKeySecret: process.env.ALIYUN_ACCESS_KEY_SECRET,bucket: process.env.ALIYUN_BUCKET,
};const client = new OSS(config);// multer 配置信息
const upload = multer({storage: MAO({config: config,destination: 'uploads'  // 自定义上传目录}),limits: {fileSize: 5 * 1024 * 1024, // 限制上传文件的大小为：5MB},fileFilter: function (req, file, cb) {// 只允许上传图片const fileType = file.mimetype.split('/')[0];const isImage = fileType === 'image';if (!isImage) {return cb(new BadRequest('只允许上传图片。'));}cb(null, true);}
});//  单文件上传，指定表单字段名为 file
const singleFileUpload = upload.single('file');
// 多文件上传 指定传输字段为files
const multipleFilesUpload = upload.array('files');
module.exports = {config,client,singleFileUpload,multipleFilesUpload
}

• 上面的config，都是阿里云相关的配置，直接读取刚才定义的环境变量。
• 下面的upload是multer中间件相关的配置，我们这里自定义了上传的目录，限制了文件大小和类型。
• 接着，限定了只允许单文件上传。并指定上传表单的名字叫做：file。
• 最后，导出它们，需要用到singleFileUpload。

接着就要来完善路由，实现上传操作了：
uploads.js

const { config, client, singleFileUpload, multipleFilesUpload } = require('../utils/aliyun');
const { BadRequest } = require('http-errors')/*** 阿里云 OSS 客户端上传* POST /uploads/aliyun*/
router.post('/aliyun', function (req, res) {try {singleFileUpload(req, res, async function (error) {if (error) {return failure(res, error);}if (!req.file) {return failure(res, new BadRequest('请选择要上传的文件。'));}// 记录附件信息await Attachment.create({...req.file,userId: req.userId,fullpath: req.file.path + '/' + req.file.filename,})success(res, '上传成功。', {file: req.file.url});});} catch (error) {failure(res, error);}
})// 多文件上传
router.post('/aliyunMultiple', function (req, res) {try {multipleFilesUpload(req, res, async function (error) {if (error) {return failure(res, error);}if (req.files.length === 0) {return failure(res, new BadRequest('请选择要上传的文件。'));}// 记录附件信息req.files.map(async item => {await Attachment.create({...item,userId: req.userId,fullpath: item.path + '/' + item.filename,})})success(res, '上传成功。', {files: req.files});});} catch (error) {failure(res, error);}}
)

• 顶部，引用一下刚才定义的那些上传配置。
• 接着非常简单的调用一下方法，如果报错了，就提示错误。
• 还要判断下，用户是否上传了文件。有的用户可能根本没选文件，就直接提交表单了。
• 如果没有出错，就显示已经上传的文件信息。文件信息被存储在req.file里了。

5、app.js添加路由引用

客户端直传

客户端直传。客户端，只需要请求 Node 接口，获取上传阿里云所需的授权信息。拿到这些授权信息后，再由客户端直接上传到阿里云 OSS。

这样图片不需要经过服务器中转，服务器的开销非常小，上传速度也会快很多。

对应的缺点就是，在开发上，代码麻烦点。在使用上，前端要调用两次接口，操作比较繁琐。