Question

我正在尝试存储和检索MongoDB（Gridfs）中的图像并使用HTML显示图像。

我存储了图像并获得了图片ID，在使用Ajax将id传递到HTML页面时，它会获取图像ID但是图像没有显示，任何人都可以引导我。

这是我的代码：

HTML code：

 <html>
 <head>
 </head>
   function display() {
      $.ajax({
          type: 'POST',
          url: 'xidirectorywebservice.asmx/UploadImage',

      data: "{ }",

          contentType: 'application/json; charset=utf-8',
          dataType: 'json',
          success: function (image_string) 
             {
             var data = 'data:image/png;base64,' + image_string.d;
              var icon_elem = document.getElementById("ItemPreview");  //adding img id
              icon_elem.src = data;
             $(document.body).append(image_string.d);
            },
          error: function () {
              alert("Error");
          }

      });

      }

  </script>

 </head>
 <body  onload="display()">
 <img id="ItemPreview" src=""  />
 </body>
 </html>

vb.net（Webservice）代码：

XIImage类：

Imports MongoDB.Bson
Public Class XIImage

Public Property _id As ObjectId
Public Property name As String = ""
Public Property title As String = ""
Public Property image As Byte()
Public Property ImageId() As ObjectId
End Class

代码：

 Public Function UploadImage() As String 
    Dim server As MongoServer = MongoServer.Create("mongodb://localhost")
    Dim db As MongoDatabase = server("imagedemo")

    Dim collection As MongoCollection = db("demo")

    Dim imageBook As New XIImage
    imageBook._id = New ObjectId()
    imageBook.name = "Tom Sawyer"
    imageBook.title = "Content of the book goes here"
    imageBook.image = file.ReadAllBytes("C:\Users\Prog23\Desktop\wallpapers-41.jpg")

    Dim memoryStream As Stream = New MemoryStream(imageBook.image)
    Dim gfsi As MongoGridFSFileInfo = db.GridFS.Upload(memoryStream, imageBook.name)
    imageBook.ImageId = gfsi.Id.AsObjectId
    collection.Insert(imageBook)
    Dim id As New ObjectId(imageBook.ImageId.ToString())
    Dim sfile As MongoGridFSFileInfo = db.GridFS.FindOne(Query.EQ("_id", id)  

    Using stream = sfile.OpenRead()
        Dim sid = sfile.Id
        MsgBox(sid.ToString())
    End Using
    End Function

但是当我在shell提示符中查询时，我可以看到图像的二进制格式，任何帮助将不胜感激。欢呼声。

Answer 1

这是解决方案：

Display image from binary data in html

这样写：

<img src="data:image/jpeg;base64{binary data}" />

Answer 2

您的代码仅从上传的图片中获取_id，而不是内容。你需要的是内容。我在Stack overflow上找到了一个参考，以节省一些打字。代码是C＃，但是所有类都是相同的驱动程序。

如果可以，请快速免责声明。除非您的文件很大（大约16MB [编码]）并且我猜他们不是，GridFS可能不是您的最佳选择。如果您只是将上传的文件编码为base64并将其作为字段插入，就像使用任何常规MongoDB文档一样，您可能会发现更多的快乐而不会跳过箍。因此，您会发现这更容易处理。

GridFS并不神奇，它本质上只是完成前一步骤的客户端实现，但处理智能块中的数据以克服BSON文档的16MB限制。阅读更多链接：

http://docs.mongodb.org/manual/core/gridfs/

http://docs.mongodb.org/manual/faq/developers/#faq-developers-when-to-use-gridfs

那说，随之而来：所以基本上你想要从返回的对象上的 .OpenRead（）返回的流中读取，并使用base64编码对输出进行编码。

作为以这种方式内嵌图像的替代方法，您可以将二进制数据传递到另一个控制器的响应中，该控制器通过特定的ID或名称响应图像。然后你的ajax上传只需要将url返回到图像（带有图像ID的控制器端点），这将是标准的img src属性。

包含一些魔法来检测MIME类型而不是将其硬编码到脚本中也是值得的。

从MongoDB（GridFs）存储和检索图像，并使用vb.net webservice在Html中显示

2 个答案: