在前端开发中,文件上传是一个非常常见的需求。而在现代化的 web 开发中,将文件上传至云存储已经成为一个更普遍的选择,可以减轻服务器压力,提高程序的可扩展性。Azure Blob Storage 是微软云平台提供的一种对象存储技术,可以作为 Azure Cloud 的一部分,与 Azure Functions 和 Azure App Service 等云平台服务集成使用。@fuechschen/multer-azure-storage 就是一个专门为 Azure Blob Storage 设计的 npm 包,可以帮助前端开发人员在项目中更方便地实现文件上传至云存储。
关于 @fuechschen/multer-azure-storage
@fuechschen/multer-azure-storage 是基于 Multer 实现的 Azure Blob Storage 存储桶文件上传处理中间件。它可以轻松处理从客户端上传的多个文件,将它们存储在 Azure Blob Storage 中,并返回文件相关信息。
安装
使用 @fuechschen/multer-azure-storage 有以下前置条件:
- 已经创建好 Azure Blob Storage 存储桶。
- 已经在 Azure 中设置了存储连接字符串,并将连接字符串添加到项目的 .env 文件中。
你可以通过以下命令在项目中安装 @fuechschen/multer-azure-storage :
--- ------- --------------------------------
使用
加载中间件
在文件上传处理中间件中加载 Multer 和 Multer-Azure-Storage 中间件模块,将其传递给 Multer 并指定为 storage 属性的值。最后使用 Multer 中间件加载程序主要代码如下:
----- ------ - ------------------ ----- - ------------------ - - -------------------------------------------- ----- ------ - -------- -------- --- -------------------- ----------------- -------------------------------------------- ---------- --------------------------------------------- ------------ --------------------------------------- -------------- ----------------------------------------- --------------------- ------------------------------------------------- -- ------ -- ----------- -- ---
在上述代码中,我们从 @fuechschen/multer-azure-storage 模块中引入 MulterAzureStorage 类。然后创建了一个新的 storage 实例,并且传入了一些必要的参数,例如连接字符串和存储桶相关信息。
使用中间件
Multer Azure Storage 中间件的使用非常简单。只需在前端页面中添加一个提交表单,并在 form 中指定 enctype 属性为 multipart/form-data,文件上传表单将按例进行提交。
----- ---------------- ------------- ------------------------------ ------ ----------- ------------- -- ------ ------------- ------------- ------- -- -------
将前面加载的 Multer 中间件作为处理器加载到 HTTP 路由上:
---------------------- ---------------------- --- -------- ----- ---- ----- - --------------- -------------------------- ---- ------------------- ---
在上述代码中,我们调用了 upload.array() 方法并将 'avatar' 和 3 个文件作为参数传递给 Multer 处理器。loadImages() 方法将会取出客户端上传的所有文件并在Azure Blob Storage 中存储它们。
你可以用下面的代码片段在控制台中查看上传的文件信息:
-----------------------
建议
本文介绍了 @fuechschen/multer-azure-storage 的基本使用方法。但使用此包前仍需了解 Azure Blob Storage 和 Multer 相应的基础知识。只有具备基本的知识和技能,才能将 @fuechschen/multer-azure-storage 用好,达到更好的使用效果。
示例代码
----- ------ - ------------------ ----- - ------------------ - - -------------------------------------------- ----- ------ - -------- -------- --- -------------------- ----------------- -------------------------------------------- ---------- --------------------------------------------- ------------ --------------------------------------- -------------- ----------------------------------------- --------------------- ------------------------------------------------- -- ------ -- ----------- -- --- ---------------------- ---------------------- --- -------- ----- ---- ----- - --------------- -------------------------- ---- ------------------- --- -----------------------
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600574fb81e8991b448ea34e