如何访问上传到nestjs服务器上的图片 [英] How to access image from uploaded on nestjs server

查看:11
本文介绍了如何访问上传到nestjs服务器上的图片的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个nestjs服务器,我已经上传了图片,但当我试图访问这些图片时,它们是一堆无法解释为图片的东西。(我还尝试将它们转换为BLOB,然后我将其转换为对象URL,然后将其设置为用于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;
    }

上面的上传代码完美地将图像保存为我的Uploads文件夹中的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代码仅用于测试,我的主要目的是使用此服务器,以便我可以获取学生图像和数据(包含姓名、电话等基本信息)。并将其保存在MongoDB上。我也不知道如何将我的图像从角度发送到Nestjs,以及如何保存它(以及在MongoDB或Nestjs服务器上保存它的位置以及如何保存)

任何帮助都将不胜感激! 提前谢谢。

推荐答案

要使用NestJs访问您的文件,您需要在main.ts中使用.useStaticAssets方法app

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

这篇关于如何访问上传到nestjs服务器上的图片的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆