Как я могу загрузить изображения в MongoDB и отобразить их в моем шаблоне? - PullRequest
Новая
       29

Как я могу загрузить изображения в MongoDB и отобразить их в моем шаблоне?

0 голосов
/ 20 декабря 2018

Как я могу хранить фотографии в mongodb и отображать их в моем шаблоне Динамически.

Я уже создал форму, в которой хранятся данные пользователя, но я хочу получить фотографию и отобразить ее через шаблон,Есть ли способ сделать это?

MongoDB только показывает мне C: \ fakepath \ 33783991_259829344578817_7526307875543580672_n.jpg "! Что это значит? Есть ли какой-нибудь рабочий пакет для файла метеора, кроме облачного?

Ответы [ 4 ]

0 голосов
/ 27 декабря 2018

Есть много пакетов, которые вы можете использовать для этого.Я рекомендую CollectionFS .

Вам нужно добавить эти 3 пакета, и все готово.

cfs: стандартные пакеты cfs: gridfs // хранилищепакет адаптеров.Вы можете изменить это, если хотите.cfs: filesystem

Начнем с вставки изображения.

1.Создайте ImageCollection.js в вашей папке lib 

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
    }

Примечание. Убедитесь, что вы импортируете свою коллекцию книг в нужное место для отображения изображения.

0 голосов
/ 21 декабря 2018
0 голосов
/ 23 декабря 2018

Если вы не возражаете против использования пакета, используйте этот 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 не передается в Конструктор, он равен активам / приложениям / загрузкам и относительно запущенного скрипта

На этапе разработки: yourDevAppDir /.meteor / местные / сборки / программы / сервер.Примечание. Все файлы будут удалены, как только ваше приложение будет перестроено или вы выполните сброс метеора.Чтобы сохранить постоянное хранилище во время разработки, используйте абсолютный путь вне папки вашего проекта, например, каталог / data.

На производстве: yourProdAppDir / Programs / Server.Примечание. При использовании MeteorUp (MUP) тома Docker необходимо добавить в mup.json, см. Использование MUP

Подсказка: Затем вы можете использовать настройки upload by base64 в вставьте метод и прослушайте событие onuploaded, чтобы сохранить его в своей базе данных.

Чтобы показать изображение в шаблоне, вы можете закодировать его так: 

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

Подробнее о схеме URI данных

Источник: Документация

0 голосов
/ 20 декабря 2018

Вы должны закодировать ваше изображение в base64, чтобы сохранить его в документе mongodb.

Будьте осторожны, чтобы не превысить ограничение формата 16 МБ BSON (или использовать GridFS Mongodb).В шаблоне вы можете использовать строку base64 изображения в атрибуте src img.

...