【问题标题】:Store a dataURL in MongoDB to access it via local URL (JS)在 MongoDB 中存储一个 dataURL 以通过本地 URL (JS) 访问它
【发布时间】:2017-07-11 01:01:08
【问题描述】:

所以我不知道我的标题是否足够清楚,我想做的是,在我的 Meteor 应用程序中,有一个工具可以将文件上传到我的 MongoDB,并输出一个我可以使用它的 URL显示为 src 的示例 然而,我创建了我的收藏:

export const Files = new Mongo.Collection('files');

还有一个 addFile 函数:

export const addFile = (nameArg: String, dataURL: String) => {
 Files.insert({
  _id: uuid(),
  name: nameArg,
  url: dataURL
 });
console.log("file "+nameArg+" added");
};

然后我用react-jsonschema-form这个包来显示一个文件表单

<Form
  schema={{
    type: 'object',
    properties: {
       file: {
         type: 'string',
         title: 'Upload an image to get its URI'
         }
       }
  }}
  uiSchema={{
    file: {
       'ui:widget': 'file'
    }
  }}
  onChange={this.onChange}
  liveValidate
  >
  <div />
</Form>

我的 onChange 函数:

onChange = (e: { formData: { file: string } }) =>{
  const [dataType, nameBis,] = e.formData.file.split(';');
  const name = nameBis.split('=')[1];
  Promise.resolve().then(addFile(name, e.formData.file));

}

我想使用地址 sush 作为window.location.host+'/file/'+name 能够使用此图像。 我相信这是可能的,但如何?

感谢所有回复:)

【问题讨论】:

    标签: javascript mongodb image reactjs meteor


    【解决方案1】:

    使用包cfs:standard-packages 和cfs:filesystem 以安全的方式实现这一点非常有可能。坦率地说,我没有深入回答您的问题。

    这是一个漂亮的包裹。你可以阅读上面的here packages in depth。

    创建文件系统集合的代码

    var imageStore = new FS.Store.FileSystem("YOUR_COLLECTION_NAME");
    
    YOUR_COLLECTION_NAME = new FS.Collection("YOUR_COLLECTION_NAME", {
      stores: [imageStore]
    });
    

    简而言之。文件将保存在bundle/ 的兄弟位置cfs/files/YOUR_COLLECTION_NAME。有关文件的信息将保存在集合cfs.YOUR_COLLECTION_NAME.filerecord 中,临时位置将用于内部用途,集合cfs._tempstore.chunks 如下所示。

    如果您使用上述软件包保存任何文件。元数据将保存在cfs.YOUR_COLLECTION_NAME.filerecord 中,如下所示

    {
        "_id" : "TBmxbsL2cMCM2tEc7",
        "original" : {
            "name" : "photo.jpg",
            "updatedAt" : ISODate("2017-07-06T12:54:50.115Z"),
            "size" : 2261,
            "type" : "image/jpeg"
        },
        "uploadedAt" : ISODate("2017-07-08T06:58:32.433Z"),
        "copies" : {
            "YOUR_COLLECTION_NAME" : {
                "name" : "photo.jpg",
                "type" : "image/jpeg",
                "size" : 2261,
                "key" : "YOUR_COLLECTION_NAME-TBmxbsL2cMCM2tEc7-photo.jpg",
                "updatedAt" : ISODate("2017-07-08T06:58:32.475Z"),
                "createdAt" : ISODate("2017-07-08T06:58:32.475Z")
            }
        }
    }
    

    在客户端,您可以使用

    获取文档文件的链接

    YOUR_COLLECTION_NAME.find({"_id" : "TBmxbsL2cMCM2tEc7"}).url();

    此 url 是基于令牌的安全链接到文件,而不是直接定位到您的服务器。您可以像普通收藏一样为下载和内容设置额外的允许/拒绝设置。希望这会有所帮助!

    【讨论】:

    • 问题是我的代码已经有了完整的图像作为base64中的dataURL,所以我想把它存储在一个小的fs中。我查看了 cfs:* 文档,但在插入步骤时遇到了麻烦,因为我将表单定义为 .jsx 文件中的 react.component,因此在我的 onChange 函数中,数据包含在 event.formData .file 作为 base64。
    • 使用 react 还是 blaze 都没关系。只需将该文件分配给 FS.File 实例,然后将这个实例分配给 File 集合,就完成了。就是这么简单。
    • 好的,问题已解决,.url() 不起作用,但由于 cfs:filesystem 放置上传文件的方式,我可以将其解析为 window.location.origin+'/cfs/files/uploads/'+fileObj._id。谢谢
    • 很高兴为您提供帮助!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-06-04
    • 1970-01-01
    • 2015-09-16
    • 1970-01-01
    • 2018-05-23
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多