Angularjs 使用文件系统使用collectionfs显示上载的图像

Angularjs 使用文件系统使用collectionfs显示上载的图像,angularjs,mongodb,meteor,angular-meteor,Angularjs,Mongodb,Meteor,Angular Meteor,我正在尝试向访问该应用程序的用户显示我上传的图像 我仍然没有从我的项目中删除包不安全或自动发布 我有一个这样的函数: $scope.upload = (event) => { var file = event; //assuming 1 file only console.log(file); if (!file) return; Images.insert(file, function (err, fileObj) { if (err) { conso

我正在尝试向访问该应用程序的用户显示我上传的图像

我仍然没有从我的项目中删除包
不安全
自动发布

我有一个这样的函数:

$scope.upload = (event) => {
  var file = event; //assuming 1 file only
  console.log(file);
  if (!file) return;
  Images.insert(file, function (err, fileObj) {
    if (err) {
      console.log(err);
    } else {
      console.log('success', fileObj);
    }
  });
}
它将图像存储在本地计算机中

Images = new FS.Collection("images", {
  stores: [new FS.Store.FileSystem("images", {path: "/home/user/uploadedimages"})]
});
在我的
meteor mongo
控制台中,当我执行
show.collections
时,我会得到
cfs.images.filerecord
,它具有以下功能:

{
    "_id" : "yqEzEH2us7SZveDm2",
    "original" : {
        "name" : "Screenshot from 2016-05-11 14:38:59.png",
        "updatedAt" : ISODate("2016-05-11T18:38:59.636Z"),
        "size" : 607292,
        "type" : "image/png"
    },
    "uploadedAt" : ISODate("2016-05-15T03:04:40.447Z"),
    "copies" : {
        "images" : {
            "name" : "Screenshot from 2016-05-11 14:38:59.png",
            "type" : "image/png",
            "size" : 607292,
            "key" : "images-yqEzEH2us7SZveDm2-Screenshot from 2016-05-11 14:38:59.png",
            "updatedAt" : ISODate("2016-05-15T03:04:40Z"),
            "createdAt" : ISODate("2016-05-15T03:04:40Z")
        }
    }
}
问题

如何向客户端显示上载的图像

我读过你做过类似的事情

<div ng-repeat="image in images">
  <img ng-src="{{image.url}}" width="400px" alt="">
</div>


但这不会渲染图像或显示任何内容。我知道我不用订阅就可以看到数组,因为我还没有从meteor中删除
autopublish
包。

您可以使用var fileObj.url();在成功回调中获取上载图像的url。例如:

var url = fileObj.url({brokenIsFine: true});
console.log(url); 

您可以使用var fileObj.url();在成功回调中获取上载图像的url。例如:

var url = fileObj.url({brokenIsFine: true});
console.log(url); 

我不熟悉这个词。但是,难道没有任何大括号或其他东西使图像中的图像成为变量循环吗?我是Blaze&React家伙。请原谅,如果听起来没有问题。据我所知,角度部分是正确的。问题是你在哪里上传?Meteor将在公共文件夹中提供公共内容,因此,如果您在该文件夹中上载图片,并在img标记中引用正确的URL,则当URL更新时,它将显示图像。现在,在开发模式下,您可能会遇到另一个典型问题,即Meteor中的热代码重新加载会在公用文件夹中发生更改时触发,因此在上载图像时,您的应用程序很可能会重新加载。我必须使用的技巧是上传到另一个文件夹,并从该文件夹写入到服务器文件的路由。Hi@MrE我不希望图像存储在同一个应用程序文件夹中,因为我进行手动部署,我必须在新版本中复制并粘贴带有上传图像的文件夹。我想有一个不同的文件夹在服务器以外的应用程序文件夹上传的图像。你能给我举个你做过的例子吗?我对angular不熟悉。但是,难道没有任何大括号或其他东西使图像中的图像成为变量循环吗?我是Blaze&React家伙。请原谅,如果听起来没有问题。据我所知,角度部分是正确的。问题是你在哪里上传?Meteor将在公共文件夹中提供公共内容,因此,如果您在该文件夹中上载图片,并在img标记中引用正确的URL,则当URL更新时,它将显示图像。现在,在开发模式下,您可能会遇到另一个典型问题,即Meteor中的热代码重新加载会在公用文件夹中发生更改时触发,因此在上载图像时,您的应用程序很可能会重新加载。我必须使用的技巧是上传到另一个文件夹,并从该文件夹写入到服务器文件的路由。Hi@MrE我不希望图像存储在同一个应用程序文件夹中,因为我进行手动部署,我必须在新版本中复制并粘贴带有上传图像的文件夹。我想有一个不同的文件夹在服务器以外的应用程序文件夹上传的图像。你能给我举个例子吗?你的解决方案很有效。我已经在本地测试了它,它正在工作,但我问,在生产中这样做,因为我手动部署,我必须一次又一次地重建应用程序,再次构建应用程序是否意味着丢失以前上载的所有文件?我似乎找不到它上载到的文件夹
url/cfs/files/images/…
我还通过nginx做了另一个解决方案,将其上载到应用程序外部的文件夹,并通过nginx反向代理提供服务,该代理也可以工作,我在应用程序外部有文件夹,但我不确定这是否是最好的解决方案。你的解决方案可以工作。我已经在本地测试了它,它正在工作,但我问,在生产中这样做,因为我手动部署,我必须一次又一次地重建应用程序,再次构建应用程序是否意味着丢失以前上载的所有文件?我似乎找不到它被上传到
url/cfs/files/images/…
的文件夹,我还通过nginx做了另一个解决方案,将其上传到应用程序外的文件夹,并通过nginx反向代理服务,该代理也可以工作,我在应用程序外有文件夹,但我不确定这是否是最好的解决方案。