如何访问上传到nestjs服务器上的图像答案

【问题标题】：How to access image from uploaded on nestjs server如何访问上传到nestjs服务器上的图像
【发布时间】：2021-02-22 12:12:45
【问题描述】：

我有一个nestjs服务器，我已经上传了图像，但是当我尝试访问这些图像时，它们是一堆不能被解释为图像的东西。（我还尝试将它们转换为blob，然后我转换为objectURL，然后将其设置为 img 标签的 src，但这也不起作用）。上传代码：

    @Post('upload')
    @UseInterceptors(FileInterceptor('file',{
        storage: diskStorage({
          destination: './uploads',
          filename: editFileName,
        }),
        fileFilter: imageFileFilter,
      }))
    uploadFile(@UploadedFile() file){
        console.log(file);
        file.filename = file.originalname;
        const response = {
            originalname: file.originalname,
            filename: file.filename,
        }
        return response;
    }

上面的上传代码完美地将图像保存为 index-53a2.jpg 在我的上传文件夹中。现在尝试使用 get req by 获取图像：

@Get()
display(@Res() res){
    res.sendFile('index-53a2.jpg',{ root: './uploads' })
}

为此记录响应它会给出一些不可读（可能已编码）的字符串。

我用于测试的代码：

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
      $(function () {

        $('#abc').on('submit', function (e) {

          e.preventDefault();

          $.ajax({
            url: 'http:/localhost:3000/student/upload',
            method:'POST',
            data: new FormData(this),
            contentType: false,
            cache:false,
            processData:false,
            success: function (data) {
              console.log(data);
              // location.reload();
            }
          });

        });

      });

      function fun(){
        $.ajax({
            url: 'http://localhost:3000/student',
            success: function(data){
                console.log('s',data);
                let blob = new Blob([data]);
                var objectURL = URL.createObjectURL(blob);
                document.getElementById('img').src = objectURL;
            },
            error: function(data){
                console.log('e',data);
            }
        })
      }
    </script>
  </head>
  <body>
    <img alt="Image" id="img">
    <form enctype= "multipart/form-data" id="abc">
      <input type="file" name="file" required accept="image/*"><br>
      <input name="submit" type="submit" value="Submit">
    </form>
    <button onclick="fun()">Button</button>
  </body>
</html>

此外，这个 html 代码只是为了测试，我的主要目的是使用这个服务器，以便我可以从 Angular 获取学生图像和数据（包含姓名、电话等基本细节）并将其保存在 mongoDB 上。我也不知道如何将我的图像从 angular 发送到 nestjs 以及如何保存它（以及在 MongoDB 或 Nestjs 服务器上保存的位置以及如何保存）

任何帮助将不胜感激！！！提前致谢。

【问题讨论】：

标签： node.js angular mongodb express nestjs

【解决方案1】：

要使用 NestJs 访问您的文件，您需要在 main.ts 中使用 .useStaticAssets 方法 define your static assets directory name app

app.useStaticAssets(join(__dirname, '..', 'public'), {
    index: false,
    prefix: '/public',
});

【讨论】：

【解决方案2】：

我找到了解决方案。所以我们要做的基本上就是将我们所有的数据追加到formData中，并在angular的请求中发送。

let formData = new FormData();
formData.append('image',this.image);

现在这个图像属性取自输入标签上的onchange触发的函数，该函数将图像作为输入。

onChange(event){
   this.image = event.target.files[0];
}

现在我们将其从我们的服务发送到后端。

sendReq(formData){
   this.http.post('localhost:3000/your_route',formData);
}

现在在从 Nestjs 服务器访问它时，我们使用 FileInterceptor。

import { Controller, Get, Post, Res, UploadedFile, UseInterceptors, Body } from '@nestjs/common';
import { FileInterceptor } from '@nestjs/platform-express';
import { editFileName, imageFileFilter } from './funcs';
import { diskStorage } from 'multer';



@Post('your_route')
@UseInterceptors(FileInterceptor('image',{
        storage: diskStorage({
          destination: './uploads',
          filename: editFileName,
        }),
        fileFilter: imageFileFilter,
      }))
    async func(@UploadedFile() file, @Body() body){
        try{
            body.image = file.filename;
            body.view = false;
            let res = await this.yourService.yourFunc(body);
            return {
                'success': true,
                'data': res
            }
        }
        catch(err){
            console.log(err);
            return {
                'success': false,
                'data': err
            }
        }
    }

const imageFileFilter = (req, file, callback) => {
    if (!file.originalname.match(/\.(jpg|jpeg|png|gif)$/)) {
      return callback(new Error('Only image files are allowed!'), false);
    }
    callback(null, true);
  };

 const editFileName = (req, file, callback) => {
    const name = file.originalname.split('.')[0];
    const fileExtName = '.'+file.originalname.split('.')[1];
    const randomName = Array(4)
      .fill(null)
      .map(() => Math.round(Math.random() * 16).toString(16))
      .join('');
    callback(null, `${name}-${randomName}${fileExtName}`);
  };

这样，我们在根目录中获得了一个上传文件夹，上传到我们服务器的图像保存在这里。为了保存图像，我这里的用户名是正在上传的文件的名称 + '-' + 一系列随机字符和长度为 4 的 int（在这里你可以有自己的逻辑）。

【讨论】：