如何在reactjs中上传到Firebase存储之前调整图像大小

我正在尝试调整用户上传的图像大小，以提高我的网站效率并限制我的存储使用量。

我从包中创建了一个名为 resizeFile 的函数"react-image-file-resizer"

现在我正在努力解决的是在上传到 firebase 存储之前如何调整图像大小？

这是我的代码：

const resizeFile = (file) =>
  new Promise((resolve) => {
    Resizer.imageFileResizer(file, 500, 500, "JPEG", 100, 0, (uri) => {
      resolve(uri);
    });
  });

const addProperty = async () => {
      if (
        !propName ||
     
      
      ) {
        alert("Please Enter All Required Data");
      } else {
        await firebase
          .firestore()
          .collection("Properties")
          .add({
            propname: propName,
        
          })
          .then(async (result) => {
            await Promise.all(
              selectedImages.map(async (image) => {
                const uri = await resizeFile(image);// i dont know what to do after this point
                console.log(uri);
                const storageRef = storage.ref(
                  `propertyImages/${result.id}/${image.name}`
                );
                storageRef.put(uri).then((urls) => {
                  console.log(urls);
                  storageRef.getDownloadURL().then( (downloadUrls) => {
                    console.log(downloadUrls);
                     firebase
                     .firestore()
                      .collection("Properties")
                      .doc(result.id)
                      .update({
                        propertyID: result.id,
                        imageUrls: firebase.firestore.FieldValue.arrayUnion(downloadUrls)
                      })
                      .then((res) => {
                        //handleUploadChange();
                        // alert("Property Added Successfully");
                        // window.location.reload();
                      });
                  });
                });
              })
            );
          });
      }
    };

EDIT:

好吧，我设法解决了这个问题，但仍然存在一个问题，即由于某种原因，高度永远不会调整为我指定的 maxHeight。这是为什么？

这是我修改的：

await Promise.all(
              selectedImages.map(async (image) => {
                const uri = await resizeFile(image);
                console.log(uri);
                const storageRef = storage.ref(
                  `propertyImages/${result.id}/${image.name}`
                );
                storageRef.putString(uri,'data_url').then((urls) => {
                  console.log(urls);
                  storageRef.getDownloadURL().then( (downloadUrls) => {
                    console.log(downloadUrls);
                     firebase
                     .firestore()
                      .collection("Properties")
                      .doc(result.id)
                      .update({
                        propertyID: result.id,
                        imageUrls: firebase.firestore.FieldValue.arrayUnion(downloadUrls)
                      })
                      .then((res) => {
                        //handleUploadChange();
                        // alert("Property Added Successfully");
                        // window.location.reload();
                      });
                  });
                });
              })
            );

我通过这种方式解决了 firebase 和图像大小调整问题。事实证明，该包确实会调整图像大小并将图像压缩为您指定的任何内容，但如果图像是其他格式，例如 png（因为我指定了 JPEG），它不会完全按照您的喜好调整其大小。然而，评论中有人表示这与 firebase 无关，而是通过 firebase 函数解决的。

我所要做的就是使用 .putString() ，以便返回的 base64 将转换为 firebase 存储中的字符串。因此，我的问题的答案实际上与 firebase 和 firebase 存储有很大的联系。

const resizeFile = file =>
  new Promise(resolve => {
    Resizer.imageFileResizer(file, 500, 500, "JPEG", 25, 0, uri => {
      resolve(uri);
    });
  });

const addProperty = async () => {
  if (
    !propName ||
    !price ||
    !bedroom ||
    !bathroom ||
    !area ||
    !type ||
    !category ||
    !features ||
    !services
  ) {
    alert("Please Enter All Required Data");
  } else {
    await firebase
      .firestore()
      .collection("Properties")
      .add({
        propname: propName,
        price: price,
        bedrooms: bedroom,
        bathroom: bathroom,
        exclusive: exclusive,
        area: area,
        type: type,
        category: category,
        features: features,
        services: services,
        summary: summary,
        location: location,
        salesAgentID: salesAgent,
        date: getCurrentDate(),
      })
      .then(async result => {
        await Promise.all(
          selectedImages.map(async image => {
            const uri = await resizeFile(image);
            const storageRef = storage.ref(
              `propertyImages/${result.id}/${image.name}`
            );
            storageRef.putString(uri, "data_url").then(urls => {
              storageRef.getDownloadURL().then(downloadUrls => {
                console.log(downloadUrls);
                firebase
                  .firestore()
                  .collection("Properties")
                  .doc(result.id)
                  .update({
                    propertyID: result.id,
                    imageUrls:
                      firebase.firestore.FieldValue.arrayUnion(
                        downloadUrls
                      ),
                  })
                  .then(res => {
                    setIsUploaded("Uploaded success");

                    //handleUploadChange();
                    // alert("Property Added Successfully");
                    // window.location.reload();
                  });
              });
            });
          })
        );
      });
  }
};