文件上传到哪里更好？
- 上传到服务器本地
上传到服务器本地，这种方法在现今商业项目中，几乎已经见不到了。因为服务器带宽，磁盘 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。
这样图片不需要经过服务器中转，服务器的开销非常小，上传速度也会快很多。
对应的缺点就是，在开发上，代码麻烦点。在使用上，前端要调用两次接口，操作比较繁琐。
