处理文件上传可以使用 Nest 提供的 FileInterceptor 拦截器,我们可以创建一个专门处理上传头像用的拦截器。在 avatar 下面新建一个文件,放在 interceptors 里面,名字是 avatar.interceptor.ts 。
文件里面导出一个拦截器,名字是 AvatarInterceptor ,它的值可以用一下 FileInterceptor ,设置一下上传的时候用的字段的名字,这里把它设置成 avatar,然后提供一个选项参数,设置一下它的 fileFilter ,对应的值用一下 imageFileFilter 这个过滤器。
上传头像接口
打开 avatar.controller,在这个控制器里定义一个上传头像用的接口,用 @Post 装饰一下,地址是 avatar,下面再用 @UseInterceptors ,使用一个 AvatarInterceptor 拦截器。
方法的名字是 createAvatar ,添加一个参数,用 @UploadedFile() 装饰一下这个参数,名字是 file,类型是 Express.Multer.File 。
在这个方法里面,用 console.log 在控制台上输出 file 参数的值。
测试
在 Http 客户端测试一下这个接口,在用户的下面,新建一个请求,名字是上传头像,请求的方法选择 POST。配置一下请求地址,一个基本地址,加上一个 avatar。
设置一下请求主体,类型是 Multipart Form,字段的名字是 avatar,字段的值设置成 File ,然后选择一个图像文件,确定一下。再发送一下这个请求。
提示不能上传此类型的文件,应该是我们用的文件过滤器有点问题,打开头像接口用的这个文件过滤器,这里我之前设置的允许的文件类型有点问题,应该是 image/jpg ,不是点,修改一下这几个类型。
再回到 Http 客户端,重新发送一下这个上传请求。
成功以后,回到项目观察一下,在 uploads 这个目录里面,会出现刚才上传上来的这个文件。 在控制台再观察一下,这里输出的东西就是上传了文件以后,Multer 在请求里包含的 file 相关数据。里面有文件的名字,路径这些信息。