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

2024-01-03

我有一个 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 获取图像:

@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上。另外,我不知道如何将图像从 Angular 发送到 Nestjs 以及如何保存它(以及将其保存在 MongoDB 或 Nestjs 服务器上的位置以及如何保存)

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


要使用 NestJs 访问您的文件,您需要定义您的静态资产目录名称 https://docs.nestjs.com/recipes/serve-static in the main.ts使用.useStaticAssets方法对你的app

app.useStaticAssets(join(__dirname, '..', 'public'), {
    index: false,
    prefix: '/public',
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何访问nestjs服务器上上传的图像 的相关文章

随机推荐

  • 用于具有多重分派的数组数组的 Julia 参数函数

    我正在尝试编写两个同名的函数 它们可以利用 Julia 的多重调度功能 并涉及数组和数组数组 假设有这三个输入变量 typeof a gt Array Array T N 1 a Array 1 2 3 4 5 6 typeof b gt
  • 以编程方式将程序集安装到 GAC 中

    我需要使用 C 在 GAC 中安装程序集 下面是我的代码 new System EnterpriseServices Internal Publish GacInstall MyAssembly dll 上面的代码给出了错误 需要绝对路径
  • Objective-C 和 Core Data 中的正则表达式

    有在 Objective C 中使用正则表达式的指南吗 具体要在 Reg Ex 中输入什么内容 核心数据属性中的字段 特别是 如何将输入限制为仅限一定数量的数字 字母以及英国邮政编码 Thanks 根据 Apple 文档 NSPredica
  • 使用 jquery 模板的多维数组

    我有以下 JavaScript 对象 var arr id 1 name one id 2 name two id 3 name three id 4 name four id 5 name five id 6 name six I m t
  • 在 Google 电子表格中导入 XML 并返回 Google 搜索结果

    我正在尝试使用以下命令将 Google 搜索结果上传到我的 Google 电子表格中importxml以前有效的代码不再有效了 我有 IMPORTXML https www google com search q site query nu
  • 在 hibernate 中检索单个字段而不是整个 pojo

    我对休眠有一些疑问 表 Employee Master 身份证号 名称 varchar 工资长 POJO EmployeeMaster java public class EmployeeMaster private int id priv
  • 从 jQuery 调用 Web 服务

    我正在尝试使用 jQuery 来使用我的 Web 服务 并且基本上只需要 Web 服务来调用函数即可 我在 NET 中使用的代码是这样的 ServiceContract Namespace http Sinvise Service publ
  • 对角线移动使玩家走得更快

    我有这个简单的移动脚本 if x gt 0 if key pygame K a or key pygame K LEFT rect player move ip 1 speed 0 if x lt SCREEN WIDTH 110 if k
  • 保存禁用字段

    在我的 edit ctp 中 我有一个不需要用户更改的选择框 所以我把array disabled gt true 但是这个字段不会出现 pr this gt data 并在保存时显示错误 有什么选择可以解决这个问题 如果您知道数据的值 则
  • Python Pandas Drop Duplicates 保持倒数第二

    选择 pandas 数据框中每个重复集的倒数第二个的最有效方法是什么 例如我基本上想做这个操作 df df drop duplicates Person Question take last True 但是这个 df df drop dup
  • 如何在 Clojure 中的嵌套数组映射中查找键到值的路径?

    假设我有 def a map foo bar biz baz qux 我如何找到给定值 qux 的键路径 这样 get in a map
  • gcc 4.5 特有的 C++ 数组创建问题

    以下代码适用于 gcc 2 9 至 4 4 版本 但不适用于 4 5 版本 struct Pass int main void Pass passes new Pass 10 gcc 4 5 的具体错误消息是 prob cc In func
  • 如何保留 int 变量的前导零?

    下面是一段代码 是功能性解密和加密程序的一部分 while checkvar lt maxvar is set to lt as maxvar is 1 to high for the index of var output append
  • 正则表达式阻止 nginx 中的 url

    我想阻止访问末尾有多余字符的网址 例如 我希望 nginx 阻止请求https www example com url pattern amp extra chars more extra 但希望它允许https www example c
  • 获取android中的账户列表

    我正在开发一个应用程序 我需要在其中查看用户手机中的帐户列表 我已经执行了这段代码 它似乎工作得很好 我面临的唯一问题是我想要获取帐户列表而不仅仅是一个帐户 那么如何实现这一目标呢 我很确定需要一个列表视图 但我没有得到任何关于如何在这里使
  • 移动Web应用程序的服务器端架构

    在我开发过的大多数桌面 Web 应用程序中 您都需要一个服务器端 Web 框架 服务器端 Web 框架 Struts Spring MVC 等 具有某种用于处理请求的控制器 然后是用于生成动态内容的模板引擎 Velocity JSP 等 现
  • Oracle 10G XE 的 JDBC 驱动程序

    我已经安装了Oracle 10G XE 我想使用 JDBC 连接到它 我应该使用哪个驱动程序以及从哪里下载它 谢谢 在安装了服务器的机器上 Oracle JDBC 驱动程序位于ORACLE HOME jdbc lib 就放ojdbc14 j
  • 如何暂停用js和html5制作的简单画布游戏?

    在遵循 YouTube 上的一些简单教程后 我创建了一个简单的贪吃蛇游戏 问题是游戏没有暂停功能 例如 当按 P 时 游戏应该暂停 恢复 并且当蛇碰到画布边界时 游戏会自行重新启动 但这是另一个问题 这是我拥有的游戏的完整代码 https
  • 函数参数的 JavaScript 执行上下文

    function Apple this name apple function Orange this name orange this apple new Apple this apple onCalled function alert
  • 如何访问nestjs服务器上上传的图像

    我有一个 Nestjs 服务器 并且已经上传了图像 但是当我尝试访问这些图像时 它们是一堆无法解释为图像的东西 我还尝试将它们转换为 blob 然后将其转换为 objectURL 然后将其设置为 img 标签的 src 但这也不起作用 上传