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

server/2025/1/11 22:29:05/

文件上传到哪里更好？

  • 上传到服务器本地

上传到服务器本地，这种方法在现今商业项目中，几乎已经见不到了。因为服务器带宽，磁盘 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。

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

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


http://www.ppmy.cn/server/157594.html

相关文章

概要性了解Linux的总线设备驱动

概要性了解Linux的总线设备驱动

引言 假如我们的板子上有很多LED，有时候需要操作这个LED，有时候需要操作另一个LED，我们希望代码可以清晰地组织在一起，方便扩展，同时自动为这些具体的设备生成对应的设备文件以供用户空间使用。 在Linux中&#xff0…
阅读更多...
代理模式简介

代理模式简介

代理模式是一种设计模式，它允许我们通过一个中介对象来间接访问目标对象，这个中介对象称为“代理”。代理模式的关键在于，它在不改变目标对象代码的前提下，通过引入代理对象来增加额外的功能或控制对目标对象的访问。 代理模式的基…
阅读更多...
npm run 运行项目报错：Cannot resolve the ‘pnmp‘ package manager

npm run 运行项目报错：Cannot resolve the ‘pnmp‘ package manager

尝试使用 npm 运行一个项目，但是在解析 pnmp 包管理器时遇到了问题。这通常意味着项目可能配置错误，或者可能误输入了命令。 解决方法： 确认是否有拼写错误。通常情况下，应该是 npm 而不是 pnmp。 检查项目的 package.json 文件&…
阅读更多...
弹性云服务器和普通服务器的区别

弹性云服务器和普通服务器的区别

云服务器随着云计算的快速发展，也受到了各个企业的广泛使用，随着业务需求的不断变化，云服务器的类型也在不断进行细化，其中弹性云服务器逐渐受到企业的欢迎，那么弹性云服务器和普通服务器究竟有什么区别呢？…
阅读更多...
Linux内核 -- RTC 驱动的注册方式

Linux内核 -- RTC 驱动的注册方式

Linux 内核中 RTC 驱动的注册方式 在 Linux 内核中，RTC（Real-Time Clock）驱动的注册可以通过多种方式实现，以下整理了常见的注册方式及其注意事项。 1. 使用 devm_rtc_device_register 这是注册 RTC 驱动的最常用方法&#xff…
阅读更多...
将光源视角的深度贴图应用于摄像机视角的渲染

将光源视角的深度贴图应用于摄像机视角的渲染

将光源视角的深度贴图应用于摄像机视角的渲染是阴影映射（Shadow Mapping）技术的核心步骤之一。这个过程涉及到将摄像机视角下的片段坐标转换到光源视角下，并使用深度贴图来判断这些片段是否处于阴影中。 1. 生成光源视角的深度贴图 首先&…
阅读更多...
景芯SOC设计实战

景芯SOC设计实战

终身辅导、一对一辅导，手把手教您完成SoC全流程设计，从入门到进阶，带您掌握SoC芯片架构、算法、设计、验证、DFT、后端及低功耗全流程！直播视频不定期升级！让您快速超越同龄人！ 景芯团队主打文档服务器实战…
阅读更多...
Go语言中的接收器（Receiver）详解

Go语言中的接收器（Receiver）详解

在 Go 语言中，接收器（Receiver） 是指在方法声明中与方法绑定的对象。它是 Go 语言实现面向对象编程（OOP）特性的核心之一。接收器的作用是将方法绑定到某个类型的实例（值或者指针），让…
阅读更多...
最新文章

Copyright @ 2022~2023