如何将照片存储在 mongodb 中并动态显示在我的模板中。
我已经创建了一个表单来存储用户的数据，但我想获取照片并通过模板渲染它。有什么办法吗？
MongoDB 只向我显示 C:\fakepath\33783991_259829344578817_7526307875543580672_n.jpg" ！这是什么意思？除了 cloudinary 之外，还有没有用于流星文件的工作包？
【问题讨论】：
标签： mongodb meteor meteor-blaze
如果您不介意使用软件包，请使用这个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 未传递给构造函数，则它等于 assets/app/uploads 并且相对于正在运行的脚本
在开发阶段： yourDevAppDir/.meteor/local/build/programs/server。注意：一旦您的应用程序重建或运行meteor reset，所有文件都将被删除。为了在开发过程中保持存储持久性，请使用项目文件夹之外的绝对路径，例如/数据目录。
在生产中： yourProdAppDir/programs/server。注意：如果使用 MeteorUp (MUP)，必须将 Docker 卷添加到 mup.json 中，请参阅 MUP 用法
提示：
然后您可以使用insert method 中的upload by base64 设置
并监听 onuploaded 事件以保存在您的数据库中。
要在模板中显示图像，您可以这样编码
<img src="data:image/jpeg;base64,{{ImginBase64}}" class="img-responsive">
【讨论】：
您应该使用 base64 对图像进行编码，以便将其保存在 mongodb 文档中。
注意不要超过 16MB BSON 格式限制（或使用 Mongodb 的 GridFS）。在模板中可以在img的src属性中使用图片的base64字符串。
【讨论】：
【讨论】：
您可以使用很多软件包。 我推荐CollectionFS。
您需要添加这 3 个包，一切就绪。
cfs:标准包 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
}
注意：确保将图书收藏导入到要显示图片的位置。
【讨论】：