在React Native中将多个图像上传到Firebase [英] Uploading multiple images to firebase in React Native

问题描述

因此，我对整个编码领域还是一个陌生的人，正在尝试学习如何使用react native进行编码.现在，我正在尝试找出如何使用Firebase(函数)和Google云存储上传图像.

So I am very new to the whole coding scene and am trying to learn how to code using react native. Right now, I'm trying to figure out how to upload images using firebase (functions)and google cloud storage.

下面是后端代码，使我可以将每个提交的图片上传到Firebase.

Below is the backend code that enables me to upload one image per submission to firebase.

我想知道是否可以修改此代码，以便每个提交可以上传多个图像?如果是这样，我将如何去做?

I was wondering is it possible to modify this code so that it can upload multiple images per submission? If so, how would I go about doing it?

exports.storeImage = functions.https.onRequest((request, response) => {
  return cors(request, response, () => {
          const body = JSON.parse(request.body);
          fs.writeFileSync("/tmp/uploaded-image.jpg", body.image, "base64", err => {
            console.log(err);
            return response.status(500).json({ error: err });
          });
          const bucket = gcs.bucket("myapp.appspot.com");
          const uuid = UUID();

          return bucket.upload(
            "/tmp/uploaded-image.jpg",
            {
              uploadType: "media",
              destination: "/places/" + uuid + ".jpg",
              metadata: {
                  metadata: {
                      contentType: "image/jpeg",
                      firebaseStorageDownloadTokens: uuid
                  }
              }
            },
            (err, file) => {
              if (!err) {
                return response.status(201).json({
                  imageUrl:
                    "https://firebasestorage.googleapis.com/v0/b/" +
                    bucket.name +
                    "/o/" +
                    encodeURIComponent(file.name) +
                    "?alt=media&token=" +
                    uuid,
                  imagePath: "/places/" + uuid + ".jpg"
                });
              } else {
                console.log(err);
                return response.status(500).json({ error: err });
              }
            }
          );
      })
      .catch(error => {
        console.log("Token is invalid!");
        response.status(403).json({error: "Unauthorized"});
      });
  });
});

推荐答案

我没有可轻松使用的React Native环境，但是我相信您可以使用以下代码从客户端执行此操作:

I don't have a React Native environment easily available, but I believe you can do it from the client with code like this:

await firebase.storage().ref('test/test.jpg').putFile('/path/to/test.jpg');
let downloadUrl = await firebase.storage().ref('test/test.jpg').getDownloadURL();
console.log('downloadUrl :', downloadUrl); // do whatever you need with it

要上传另一张图片，您只需调用两次代码，甚至可以同时进行.

To upload another image you just call the code twice, you can even do it in concurrently if you want.

使用Firebase时，您应该直接从客户端执行大部分操作，因此，如果需要进行繁重的处理，则只需要后端(包括云功能)代码，请使用admin SDK，并与第三方应用集成，或类似的东西.对于简单的数据库或存储操作，客户端将更适合您.

When you use Firebase you should do most of the operations directly from the client, so you just need backend (including cloud functions) code if you need to do some heavy processing, use the admin SDK, integrate with third party apps, or stuff like that. For simple database or storage operations the client will suit you much better.

此外，您不需要自己编写下载URL，getDownloadUrl()会为您完成.而且，如果您从客户端访问存储，它将自动与Firebase Auth集成，从而可以保护您的数据.

Also, you don't need to compose the download URL yourself, getDownloadUrl() does that for you. And if you access storage from the client it automatically integrates with Firebase Auth so you can protect your data.

这篇关于在React Native中将多个图像上传到Firebase的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！