Question

如何将照片存储在mongodb中并动态显示在模板中。

我已经创建了一个存储用户数据的表单，但是我想获取照片并通过模板进行渲染。有什么办法吗？

MongoDB仅向我显示C：\ fakepath \ 33783991_259829344578817_7526307875543580672_n.jpg”！这是什么意思？除cloudinary以外，流星文件是否有任何工作包？

Answer 1

您应该使用base64对图像进行编码，以便将其保存在mongodb文档中。

请注意不要超过16MB BSON格式限制（或使用Mongodb的GridFS）。在模板中，可以在img的src属性中使用图像的base64字符串。

Answer 2

It is better to use an Object storage service like GridFS, S3 or Google Cloud storage, and link it with your Mongo document.或者，您可以将base64格式的图像存储在文档本身中。

https://forums.meteor.com/t/meteor-secure-file-upload-download-with-s3/38197

Answer 3

如果您不介意使用某个软件包，请使用此Meteor-Files

根据文档，这是一个下面的示例，很简单：

上传表单（模板）：

  <template name="uploadForm">
  {{#with currentUpload}}
    Uploading <b>{{file.name}}</b>:
    <span id="progress">{{progress.get}}%</span>
  {{else}}
    <input id="fileInput" type="file" />
  {{/with}}
</template>

共享代码：

import { FilesCollection } from 'meteor/ostrio:files';
const Images = new FilesCollection({collectionName: 'Images'});
export default Images; // To be imported in other files

客户代码：

import { Template }    from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
Template.uploadForm.onCreated(function () {
  this.currentUpload = new ReactiveVar(false);
});

Template.uploadForm.helpers({
  currentUpload() {
    return Template.instance().currentUpload.get();
  }
});

Template.uploadForm.events({
  'change #fileInput'(e, template) {
    if (e.currentTarget.files && e.currentTarget.files[0]) {
      // We upload only one file, in case
      // multiple files were selected
      const upload = Images.insert({
        file: e.currentTarget.files[0],
        streams: 'dynamic',
        chunkSize: 'dynamic'
      }, false);

      upload.on('start', function () {
        template.currentUpload.set(this);
      });

      upload.on('end', function (error, fileObj) {
        if (error) {
          alert('Error during upload: ' + error);
        } else {
          alert('File "' + fileObj.name + '" successfully uploaded');
        }
        template.currentUpload.set(false);
      });

      upload.start();
    }
  }
});

默认情况下，如果未将config.storagePath传递到Constructor中，则它等于资产/应用程序/上传并且相对于正在运行的脚本

在开发阶段：：yourDevAppDir / .meteor / local / build / programs / server。注意：应用程序重建或运行流星重置后，所有文件将被删除。为了在开发期间保持存储持久性，请在项目文件夹之外使用绝对路径，例如/ data目录。

生产中：yourProdAppDir /程序/服务器。注意：如果使用MeteorUp（MUP），则必须将Docker卷添加到mup.json，请参阅MUP用法

提示： 然后，您可以使用insert method中的upload by base64设置并监听onuploaded事件以保存到数据库中。

要在模板中显示图像，您可以这样编码

<img src="data:image/jpeg;base64,{{ImginBase64}}" class="img-responsive">

Read more about Data URI Scheme

来源：Documentation

Answer 4

您可以使用很多软件包。我推荐CollectionFS。

您需要添加这3个程序包，并且一切就绪。

cfs：standard-packages cfs：gridfs //存储适配器包。您可以根据需要更改此设置。 cfs：文件系统

让我们从插入图像开始。

1。在您的lib文件夹中创建ImageCollection.js

import { Mongo } from 'meteor/mongo';
export const BOOK = new Mongo.Collection('books');

var imageStore = new FS.Store.GridFS("images");

export const Images = new FS.Collection("images", {
    stores: [imageStore]
});Images.deny({
    insert: function(){
        return false;
    },
    update: function(){
        return false;
    },
    remove: function(){
        return false;
    },
    download: function(){
        return false;
    }
});
Images.allow({
    insert: function(){
        return true;
    },
    update: function(){
        return true;
    },
    remove: function(){
        return true;
    },
    download: function(){
        return true;
    }
})

2。在客户端和服务器端导入图像集合。 例如，

import {Images} from '../lib/imageCollection';

3。根据您的用途在表单中添加输入类型“文件”。

4。在该模板的.JS文件中创建一个更改事件。

'change #bookCover': function (event) {
        event.preventDefault();
        console.log("changed!")

        var files = event.target.files;
        for (var i = 0, ln = files.length; i < ln; i++) {
            Images.insert(files[i], function (err, fileObj) {

                // Inserted new doc with ID fileObj._id, and kicked off the data upload using HTTP
                bookImgId=fileObj._id;
            });
        }
    },

将插入“检入数据库映像”。

5。要显示图像，请在要查看图像的位置添加此HTML。

6。在显示图像的js文件中添加此代码。

   bookImage: function (id) {
        // console.log(id);
        var imageBook = Images.findOne({_id:id});
        // console.log("img: "+imageBook);
        var imageUrl = imageBook.url();
        return imageUrl; // Where Images is an FS.Collection instance
    }

注意：确保将要导入的图书收藏导入要显示图片的位置。

如何在MongoDB中上传图片并将其显示在我的模板上？

4 个答案: