用户登录

上传的头像文件要调整成几种不同的尺寸,这样在客户端应用里面,可以在不同的地方使用不同尺寸的用户头像。打开 avatar.middleware,先在这个文件的顶部导入几样东西,导入 Node.js 自带的 path,来自 path 模块。 一会儿需要用它组织一下文件路径。再导入之前安装的 Jimp 来自 jimp 这个包,这个东西提供了处理图像文件的功能。

找个地方定义处理头像文件的功能,它是一个中间件,名字是 avatarProcessor ,在这个中间件里面,先获取到文件信息,从 request 里面把 file 解构出来。创建这个中间件会用在 avatarInterceptor 中间件的后面,这样在这个中间件里面就可以从 request 里面得到上传的文件相关的一些信息,比如文件名,存储文件的目录等等。

再准备一个文件路径,名字是 filePath,它的值用一下 path 上的 join 方法,有三个部分,file 里的 destination,加上 resized ,再加上 file 里的 filename 。这个 filePath 就是要存储调整了尺寸之后的头像文件的路径,不过在后面我们会再加上一个表示尺寸的后缀。

下面可以去处理上传的头像文件了,用一组 try,catch,在 try 区块里可以先读取图像文件,声明一个 image,await 用一下 Jimp 上的 read 方法读取文件,要读取的文件的位置就是 file 里的 path。

现在就可以使用读取的这个 image 上的一些方法去处理这个图像文件了,用一下 image 上的 cover 方法调整一下图像的尺寸,宽度是 256,高度也设置成 256,这样就会得到一个 256 像素的正方形头像文件。

接着用 quality 设置一下图像质量,可以设置成 85,再用 write 把调整之后的头像文件写入到某个文件。这里可以设置成 filePath 后面加上小横线,然后是一个表示尺寸的后缀,比如 large。

复制一份,修改一下调整的图像尺寸,宽度,还有高度都可以设置成 128 ,修改一下文件的后缀,换成 medium ,表示中号尺寸的头像。

再复制一份,修改一下调整的图像尺寸,生成一个宽与高都是 64 像素的头像,这个头像文件的后缀可以设置成 small,表示小号尺寸的头像。

在 catch 里面,处理一下发生的错误,执行 next,带着 error。

中间件里面要执行一下 next 继续下一步的处理。

打开 avatar.router,在上传头像接口上面可以用一下这个调整头像尺寸的功能,在 avatar.middleware 里面导入 avatarProcessor。然后把这个中间件用在 上传头像 这个接口的上面。

再到 HTTP 客户端,发送一下 上传头像 这个请求。

回到项目,现在,存储上传头像的目录的下面,会出现一个 resized 目录,在这里面会存储调整了尺寸之后生成的头像文件。刚才在客户端上传的头像文件被调整成三种不同的尺寸,有 large ,medium 还有 small

调整头像的尺寸《 Node.js 服务端应用开发:用户头像 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点