使用 Meteor 将图像写入/读取到 MongoDB。答案

【问题标题】：Writing/Reading images into MongoDB with Meteor.使用 Meteor 将图像写入/读取到 MongoDB。
【发布时间】：2016-08-06 05:43:35
【问题描述】：

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

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

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

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

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

这是我将图像写入数据库的代码

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);
    }

});

【问题讨论】：

标签： javascript mongodb meteor

【解决方案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;
    }

【讨论】：