在 MongoDB 中存储一个 dataURL 以通过本地 URL (JS) 访问它

IT技术 javascript mongodb image reactjs meteor
2021-05-16 15:37:45

所以我不知道我的标题是否足够清楚，我想要做的是，在我的 Meteor App 中，有一个工具可以将文件上传到我的 MongoDB，并输出一个我可以使用它来显示的 URL作为 Yet 的 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));

}

我想使用地址信息window.location.host+'/file/'+name 以便能够使用此图像。我相信这是可能的，但是如何？

感谢所有回复:)

1个回答

使用包cfs:standard-packages和cfs:filesystem. 坦率地说，我没有深入回答你的问题。

这是一个漂亮的包。你可以在这里深入阅读上面的包。

创建文件系统集合的代码

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 是基于令牌的文件安全链接，而不是直接定位到您的服务器。您可以像普通收藏一样为下载和内容设置额外的允许/拒绝设置。希望这可以帮助！

其它你可能感兴趣的问题
上一篇有没有办法在 Next.js 中使用 Materialise CDN？ 下一篇React - 初始化状态时出现“意外令牌”