如何在React Native中接收图像数组？

问题描述

我有一个Expo移动应用程序和NodeJS（HapiJS）后端。 我想加载一批图像以填充网格。我设法使其适用于单个图像，问题出在图像阵列上。

对于一个：

fetch(apiUrl + '/pictures/' + id)
        .then(response => response.blob())

服务器端处理程序（为简化起见，从本地fs加载图像）：

{
        method: 'GET',path: '/pictures/{id}',handler: (request) => {
               return garments.getPictureByName(request.params.id)
                   .then((data) => {
                        return data;
                   });
            }
    },

getPictureByName: function (fileName) {
        return fs.promises.readFile(IMAGES_DIR + fileName);
    }

对于多个图像（为简化起见，为数据库中的每个项目都加载了相同的图像“ example.jpg”）：

{
        method: 'GET',path: '/pictures',handler: (request) => {

            return repository.getItems()
                    .then(data => {
                        const promises = data.map(item => {
                            return items.getPictureByName("example.jpg")

                        });
                        return Promise.all(promises);
                    })
                    .then((data) => {
                       console.log("RESULT",data);
                        return data;
                   });
        }
    },

记录的结果我认为还可以：

RESULT [
  <Buffer ff d8 ff e0 00 10 4a 46 49 46 00 01 01 00 00 48 00 48 00 00 ff e1 00 58 45 78 69 66 00 00 4d 4d 00 2a 00 00 00 08 00 02 01 12 00 03 00 00 00 01 00 01 ... 140210 more bytes>,<Buffer ff d8 ff e0 00 10 4a 46 49 46 00 01 01 00 00 48 00 48 00 00 ff e1 00 58 45 78 69 66 00 00 4d 4d 00 2a 00 00 00 08 00 02 01 12 00 03 00 00 00 01 00 01 ... 140210 more bytes>,<Buffer ff d8 ff e0 00 10 4a 46 49 46 00 01 01 00 00 48 00 48 00 00 ff e1 00 58 45 78 69 66 00 00 4d 4d 00 2a 00 00 00 08 00 02 01 12 00 03 00 00 00 01 00 01 ... 140210 more bytes>
]

在前端，我期望的是斑点的数组。我对吗？我应该如何处理？

loadPictures()
            .then((blob) => {
                console.log("LIST",blob);
                this.setState({refreshing: false});
                return this.readBlob(blob)
            })

export const loadPictures = () => {
    return fetch(apiUrl + '/pictures')
        .then(response => response.blob())
}

结果是：

LIST Blob {
  "_data": Object {
    "__collector": null,"blobId": "4EF1126E-1C9A-4F5F-968C-61F67CE3276A","name": "pictures","offset": 0,"size": 2015153,"type": "application/json",},}

我发送4时似乎只有一个斑点。 如果将response.blob（）更改为response.json（），我将得到：

LIST Array [
  Object {
    "data": Array [
      255,216,255,224,

等 我猜它不再是blob类型，而是JSON表示形式。任何帮助将不胜感激。谢谢

解决方法

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

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

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