Question

我允许用户通过javascript和文件上传器将照片上传到网页。基本上它只是将base64字符串复制到图像标记的src。

var reader = new FileReader();
    reader.onload = function(event){
        var img = new Image();
        img.onload = function(){
            core.DOM.on(img, 'mouseover mouseout', function() {
                core.DOM.toggleClass(this, 'over');
            });
            core.DOM.on(img, 'click', function(e) {
                core.DOM.addClass(this, 'focus');
                if(this.nextSibling != toolsContainer) {
                    referenceNode = this;
                    container.insertBefore(toolsContainer, referenceNode.nextSibling);
                }
            });
            //Append new element.
            if(referenceNode != toolsContainer) {
                container.insertBefore(img, referenceNode.nextSibling);
            } else {
                container.insertBefore(img, referenceNode);
            }
            clearFileInput(imageLoader); //Prepare file input for another upload.
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);

然后我通过ajax将html传递给服务器：

var content = imageContainer.innerHTML;
core.post('blog/upload', 'p=' + JSON.stringify({'content': content, 'title': title}),      function(req) {
    console.log(req);
});

服务器端我只是将html保存到数据库：

JSONObject json = JSONObject.fromObject(request.getParameter("p"));
String title = json.getString("title");
byte[] content = ((String) json.get("content")).getBytes();
Blog.post(user, title, content);

服务器端我使用图像标记（包括base64字符串），将其转换为字节数组，以便可以通过MEDIUMBLOB存储在mysql中。当我检索它时，我只是将byte []转换回字符串并在浏览器上发布字符串。我假设图像标记，其内容只会正常显示。它似乎看起来很正常，但显然在这个过程中有些东西被破坏或损坏。

当我从数据库中检索图像标记并将其显示在浏览器中时，图像已损坏。我在这里错过了一步吗？我可以不只是将一串base64二进制数据传递给服务器并保存吗？

将Base64内嵌图像保存到数据库

0 个答案: