我如何在React中使用GridFS从MongoDB数据库中获取图像？

问题描述

我正在一个项目中，其中已使用filepond和GridFS将图像上传到MongoDB数据库。

我对于如何找回图像并将其显示在简单的HTML元素中一无所知。

据我所知，似乎他们正在使用multer来上传文件，同时将Filepond用作前端。

以下是Filepond实现的代码：

 <div className={styles.uploadBox}>
        {/* Pass FilePond properties as attributes */}
        <FilePond
          ref={(ref) => (this.pond = ref)}
          files={this.state.files}
          allowMultiple={true}
          maxFiles={5}
          name={"singlesong"}
          allowReorder={true}
          instantUpload={false}
          labelIdle={
            'Drag & Drop your Songs or <span class="filepond--label-action"> browse </span>'
          }
          server={"/user/uploadsong"}
          oninit={() => this.handleInit()}
          onupdatefiles={(fileItems) => {
            this.setState({
              files: fileItems.map((fileItem) => fileItem.file),});
          }}
          onprocessfile={(error,res) => {
            this.handleOnUpload(error,res);
          }}
        ></FilePond>
        {this.state.message ? <Message message={this.state.message} /> : null}
      </div>

关于multer后端，这是代码：

const storage = new GridFsstorage({
  url: keys.MONGODB_URI,file: (req,file) => {
    return new Promise((resolve,reject) => {
      crypto.randomBytes(16,(err,buf) => {
        if (err) {
          return reject(err);
        }
        const filename = buf.toString("hex") + path.extname(file.originalname);
        const fileInfo = {
          filename: filename,bucketName: "songs",};
        resolve(fileInfo);
      });
    });
  },});

const upload = multer({
  storage,});

首先，我不太确定Filepond如何与后端代码进行通信。

此外，如前所述，我也不知道如何从数据库中检索任何图像。

非常感谢任何指针。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）