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

【问题标题】：NestJS - serving static files locally and on Azure websiteNestJS - 在本地和 Azure 网站上提供静态文件
【发布时间】：2020-06-27 19:32:43
【问题描述】：

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

这是我的控制器和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。

任何帮助将不胜感激。

【问题讨论】：

标签： node.js azure azure-web-app-service nestjs multer

【解决方案1】：

您需要在主文件下公开您的静态文件（在您的照片目录中）。类似的东西：

app.use('/img', express.static(join(__dirname, 'path/.../photos')));

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

【讨论】：