专业商城网站制作,免费网页设计成品,虚拟主机建站教程,免费制作网站模板文件上传到哪里更好#xff1f;
上传到服务器本地 上传到服务器本地#xff0c;这种方法在现今商业项目中#xff0c;几乎已经见不到了。因为服务器带宽#xff0c;磁盘 IO 都是非常有限的。将文件上传和读取放在自己服务器上#xff0c;并不是明智的选择。 上传到云储存…文件上传到哪里更好
上传到服务器本地 上传到服务器本地这种方法在现今商业项目中几乎已经见不到了。因为服务器带宽磁盘 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_ENVdevelopment
PORT3000
SECRETALIYUN_ACCESS_KEY_IDAccessKey
ALIYUN_ACCESS_KEY_SECRETAccessKey Secret
ALIYUN_BUCKETwlyxw-oss
ALIYUN_REGIONoss-cn-chengdu
如果项目是启动状态改完环境变量了记得一定要重启服务。
3、 安装依赖包
npm i ali-oss multer multer-aliyun-oss
ali-oss是用来操作阿里云 OSS 的 SDKmulter是专门用于上传文件的 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。 这样图片不需要经过服务器中转服务器的开销非常小上传速度也会快很多。 对应的缺点就是在开发上代码麻烦点。在使用上前端要调用两次接口操作比较繁琐。
