Question

我有一个简单的应用程序，允许用户上传照片，然后通过文件夹位置检索该照片。

这是我的控制者，multerOptions。

@Controller('api/setup')
export class SetupController {
    @Post('upload')
    @UseInterceptors(FileInterceptor('image', multerOptions))
    async uploadPhoto(@UploadedFile() image, @Req() req) {
        if (req.fileValidationError)
            throw new UnsupportedMediaTypeException('Invalid file type');
        return "Success";
    }

    @Get('photo/:photoName')
    async servePhoto(@Param('photoName') photo, @Res() res) {
        res.sendFile(photo, { root: 'photos' });
    }
}

////////////////////////////
const fileFilter = (req, file, cb) => {
    if (file.mimetype !== 'image/png') {
        req.fileValidationError = true;
        cb(null, false);
    } else {
        cb(null, true);
    }
};

export const multerOptions = {
    storage: diskStorage({
        destination: './photos',
        filename: (req, file, cb) => {
            return cb(null, 'photo.png');
        },
    }),
    fileFilter: fileFilter,
};

在本地运行此服务器代码时，将为我创建一个photos目录，如下所示：（我不确定为什么一定要在其中创建它。如您所见，安装程序控制器位于/src/Setup中。）

├── Server
│   ├── photos
|   |   ├── photo.png
│   └── src
|   |   ├── Setup
|   |   |   ├── setup.controller.ts // this is my controller file

无论如何，这一切似乎都可以在本地进行。我可以上传图像，并且导航到http://localhost:8080/api/setup/photo/photo.png时可以看到照片。

但是，当我将其部署到Azure网站时，我对照片的存储位置有些困惑。

构建服务器时，NestJS会生成一个dist文件夹，我会将其复制到我的Azure网站上。

├── wwwroot
│   ├── photos
|   |   ├── photo.png
│   └── dist
|   |   ├── Setup
|   |   |   ├── setup.controller.js // this is my built controller file
|   |   |   ├── setup.controller.js.map

现在，在上传照片并导航至网站“ http://myAzureWebsite.com/api/setup/photo/photo.png”之后，我再也看不到该照片。我认为它与路径问题有关，但我似乎无法弄清楚在哪里正确创建文件夹并引用photo.png。

任何帮助将不胜感激。

Answer 1

您需要在主文件下显示静态文件（在您的情况下为photos目录）。像这样的东西：

background: rgba(0,0,0,0.8)

PS：在 multerOptions 中，“目标”选项使您能够选择照片的保存位置。并且建议从项目目录根目录提供/保存静态文件。

NestJS-在本地和Azure网站上提供静态文件

1 个答案: