Mongodb 如何以JSON对象（或类似方便的格式）从GridFS返回图像？

我有一个表单，允许用户将图像异步上传到

GridFS

我希望能够从服务器获取图像，以便通过jQuery将其添加到div中

以前，在应用程序的其他领域，我一直在使用

getJSON（）

请求以

JSON

格式从服务器返回内容，其中包括：

瓶子

然后使用以下命令访问jQuery中的各个字段：

HTML

是否可以以类似的方便格式返回图像，以便在jQuery中轻松引用和操作

如上所述，我希望能够用检索到的图像更新div

工作代码如下-只需要帮助瓶子部分

表格

<form id="ajaxUploadForm" enctype="multipart/form-data" method="post" action="/upload">
<input type="file" id="my_img_upload_input" name="my_image">
<input type="submit" value="upload">
</form>

瓶子路径

@route('/upload', method='POST')
def do_upload():
    uploaded_image = request.files.my_image
    name, ext = os.path.splitext(uploaded_image.filename)
    if ext not in ('.png','.jpg','.jpeg'):
        return "File extension not allowed."
    if uploaded_image and uploaded_image.file:
        raw = uploaded_image.file.read()
        filename = uploaded_image.filename
        dbname = 'grid_files'
        db = connection[dbname]
        fs = gridfs.GridFS(db)
        fs.put(raw,filename=filename)
        thing = fs.get_last_version(filename=filename)
        # somehow return the image in a convenient format
        # that can be referenced in jQuery.
        # response.content_type = 'image/jpeg' OR
        # response.content_type = 'application/json' OR
        # something else?  
        # return thing
    return "You missed a field."

编辑：

以下是一种解决方案-使用base64编码方法：

dbname = 'grid_files'
db = connection[dbname]
fs = gridfs.GridFS(db)
filename = "my_image.jpg"
my_image_file = fs.get_last_version(filename=filename)
encoded_img_file = base64.b64encode(my_image_file.read())
return encoded_img_file

通过以下方式在前端访问：

$("#my_img").attr("src", "data:image/png;base64," + data);

---

从

添加用于获取图像的路由，并返回相应的mime类型。然后将该路由用作HTML中的

src

。当浏览器可以高效地获取图像时，不要使用jQuery获取图像。这是一个有趣的想法。在用户上载映像之前，该映像在服务器上不存在。我可以在成功上传后更改图像src attr，但这意味着要再次往返数据库（通过路由处理的图像GET请求）。我想base64可能会对第一次处理期间检索到的图像进行编码，将其发送回，并在成功调整图像src属性后，例如

。类似于：只需使用新ID响应上载。这样，它可以被浏览器缓存，并异步下载。您可以解释一下这一点吗

使用新ID响应上载

，我很难跟上。您应该能够返回上载图像的路径或ID。

@route('/upload', method='POST')
def do_upload():
    uploaded_image = request.files.my_image
    name, ext = os.path.splitext(uploaded_image.filename)
    if ext not in ('.png','.jpg','.jpeg'):
        return "File extension not allowed."
    if uploaded_image and uploaded_image.file:
        raw = uploaded_image.file.read()
        filename = uploaded_image.filename
        dbname = 'grid_files'
        db = connection[dbname]
        fs = gridfs.GridFS(db)
        fs.put(raw,filename=filename)
        thing = fs.get_last_version(filename=filename)
        # somehow return the image in a convenient format
        # that can be referenced in jQuery.
        # response.content_type = 'image/jpeg' OR
        # response.content_type = 'application/json' OR
        # something else?  
        # return thing
    return "You missed a field."

dbname = 'grid_files'
db = connection[dbname]
fs = gridfs.GridFS(db)
filename = "my_image.jpg"
my_image_file = fs.get_last_version(filename=filename)
encoded_img_file = base64.b64encode(my_image_file.read())
return encoded_img_file

$("#my_img").attr("src", "data:image/png;base64," + data);