我正在尝试存储和检索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提示符中查询时,我可以看到图像的二进制格式,任何帮助将不胜感激。 欢呼声。
答案 0 :(得分:1)
这是解决方案:
Display image from binary data in html
这样写:
<img src="data:image/jpeg;base64{binary data}" />
答案 1 :(得分:1)
您的代码仅从上传的图片中获取_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类型而不是将其硬编码到脚本中也是值得的。