从mongodb gridfs数据库检索多部分表单数据并在react native应用中显示图像

Question

请我需要帮助，过去两个星期来我一直在解决这个问题。我正在使用multer和gridfs将文本数据与图像一起上载到mongodb数据库，并且上载工作得很好，因为数据已上载并存储在不同的块中。但是我试图完成两件事：

1. 检索与图像一起存储的数据
2. 获取图像数据并将其显示在我的React Native应用中

我的数据库如下：

数据文本数据在post集合中，而图像数据在image_uploads.chunks和image_upload.files中，它们都使用多部分表单数据，multer和gridfs通过同一发布路径上传。

这是服务器端的获取路由，我将从mongodb检索数据并为客户端提供服务。

/////////////////////////////Media Download Route//////////////////////
router.get('/post', async (req, res) => {
  gfs.files.find().toArray((err, files) => {
    // Check if files
    if (!files || files.length === 0) {
      res.send({ files: false });
    } else {
      files.map(file => {
        if (
          file.contentType === 'image/jpeg' ||
          file.contentType === 'image/png'
        ) {
          file.isImage = true;
        } else {
          file.isImage = false;
        }
      });
      res.send({ files: files});
    }
  });
});

下面是客户端代码，用于从服务器接收数据。

    const [photo, setPhoto] = useState(null)

    const getPost = async () => {
        try {
            const response = await dataApi.get('/post');
            const image = response.data.files[0].filename

            console.log(response.data)
            console.log('Image: ', image)
            console.log('Data: ', response.body)

            setPhoto(image)
        } catch (err) {
            console.log(err.message)
        }
    }
    console.log('Photo: ', photo)

下面是response.data中的std，这是image_uploads.files中的数据，目标是显示image_uploads.files中的所有图像。但是，我仅使用第一个图像文件名（即2157d425c51a5f3f5a7cf8579137eeb6.jpg）进行测试，并调用setPhoto将其设置为照片状态。但是，当我将其分配给图像标签时，应用程序中的显示为空白，我怀疑文件名应附加一些内容，也许不确定数据库的网址，请帮忙。

第二个问题是对于image_uploads.files中的每个图像，我想在post集合中检索其相关数据，这些数据与使用多部分表单数据的图像一起上传。帖子收集中的post.mediaData.id是一个外键，即图像ID，但是response.body或response没有帖子收集中的数据，请提供帮助。预先感谢

Object {
  "files": Array [
    Object {
      "_id": "5de29f8dd0f99e6d6a0371ef",
      "chunkSize": 261120,
      "contentType": "image/jpeg",
      "filename": "2157d425c51a5f3f5a7cf8579137eeb6.jpg",
      "isImage": true,
      "length": 1046594,
      "md5": "7e1cb512a36b901e3acfcb9d08f0778f",
      "uploadDate": "2019-11-30T16:57:52.372Z",
    },
    Object {
      "_id": "5de2c1bed0f99e6d6a0371f6",
      "chunkSize": 261120,
      "contentType": "image/jpeg",
      "filename": "3ffe7616d7956084219cb4f134c89798.jpg",
      "isImage": true,
      "length": 1046594,
      "md5": "7e1cb512a36b901e3acfcb9d08f0778f",
      "uploadDate": "2019-11-30T19:23:45.053Z",
    },
  ],
}

Image:  2157d425c51a5f3f5a7cf8579137eeb6.jpg
Data:  undefined
Photo:  2157d425c51a5f3f5a7cf8579137eeb6.jpg