Question

我需要将图像文件写入mongoDB，然后将其读取到html页面元素。我发现这篇文章Meteor: uploading file from client to Mongo collection vs file system vs GridFS

尝试用第一种方式将文件写入数据库：通过DDP，将文件保存到mongo集合。

我使用RoboMongo打开我的数据库，并在那里找到我的图像作为二进制类型字段。

现在我又遇到了麻烦：我无法找到方法，我可以从数据库中读取图像并将其从二进制对象转换为图像，并将其用作流星应用程序中的图像。

请帮助，给我一些例子，我如何在Meteor中进行此操作。

这是我将图像写入DB
的代码

var image_buffer;

Template.group_add_modal.events({

    'click #create-group':function(event, template){

        console.log('create group clicked');

        var group_name = template.find('#new-group-name').value,
            group_desc = template.find('#new-group-desc').value,
            reader = new FileReader(),
            group = {};


        group = {
            created_by:Meteor.userId(),
            created_at: new Date(),
            name:group_name,
            description:group_desc,
            image:image_buffer,
            participants:[
                Meteor.userId()
            ]
        };
        console.log(image_buffer);
        addGroupDocument(group);
        Modal.hide();


        function addGroupDocument(document){
            groups.insert(document);
        }
    },

    'change #new-group-image' : function(event,template){
        var file = event.target.files[0];

        console.log('change new group image event');
        if (!file) return;

        var reader = new FileReader();

        reader.onload = function(event){
            image_buffer = new Uint8Array(reader.result);
            console.log('image buffered');
        }

        reader.readAsArrayBuffer(file);
    }

});

Answer 1

以下是对我的问题的回复：

template.find('#group-image').src = 'data:image/png;base64,'+encode(image_buffer);

    function encode (input) {
        console.log(input);
        var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
        var output = "";
        var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
        var i = 0;

        while (i < input.length) {
            chr1 = input[i++];
            chr2 = i < input.length ? input[i++] : Number.NaN; // Not sure if the index
            chr3 = i < input.length ? input[i++] : Number.NaN; // checks are needed here

            enc1 = chr1 >> 2;
            enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
            enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
            enc4 = chr3 & 63;

            if (isNaN(chr2)) {
                enc3 = enc4 = 64;
            } else if (isNaN(chr3)) {
                enc4 = 64;
            }
            output += keyStr.charAt(enc1) + keyStr.charAt(enc2) +
                keyStr.charAt(enc3) + keyStr.charAt(enc4);
        }
        return output;
    }

使用Meteor将图像写入MongoDB。

1 个答案: