是否有更简单的方法来使这些axios发出请求？

Question

我正在尝试使用axios在我的React应用中通过api将多个图像上传到cloudinary。我是诺言的新手，所以我不确定在这里是否使用正确的方法。

我能够将所有图像上传到cloudinary；但是，我得到的响应是令人困惑的部分，因为需要将图像的URL传递给对象，因此我可以使用mailgun将其发送给电子邮件。

这是我的上传图片的代码：

if(payment === "success") {
axios
    .all([
        props.imgForProduct.map((img) => {
            const fd = new FormData();
            fd.append("file", img);
            fd.append("upload_preset", "sublimation");
            return axios
                .post(
                    "https://api.cloudinary.com/v1_1/ahkji7ation/image/upload",
                    fd
                )
                .then(async (res) => {
                    return (imgUrl = res.data.secure_url);
                })
                .catch((err) => console.log(err));
        }),

        props.screenshot.map((img) => {
            const fd = new FormData();
            fd.append("file", img);
            fd.append("upload_preset", "sublimation");
            return axios
                .post(
                    "https://api.cloudinary.com/v1_1/ahkji7ation/image/upload",
                    fd
                )
                .then(async (res) => {
                    return (imgScrSht = res.data.secure_url);
                })
                .catch((err) => console.log(err));
        }),
    ])
    .then(
        axios.spread(async (...res) => {
            imgUrl.push(res[0][0]);
            imgScrSht.push(res[1][0]);

            let dataObj = {
                email: props.email,
                img: imgUrl,
                screenshot: imgScrSht,
            };
            console.log(dataObj);

            new Promise((resolve, reject) => {
                axios.post("/email_to_ayp_sublimation", dataObj);
                resolve((res) => {
                    console.log(res);
                });
                reject((err) => {
                    console.log(err);
                });
            });
        })
    )
    .catch((err) => console.error(err));    
}

[当我控制台记录dataObj时，这是我在上一个呼叫（新的Promise）中发送的内容：

screenshot: Array(1)
0: Promise {<resolved>: "https://res.cloudinary.com/ahkji7ation/image/u… 
590871936/ahkji7ation/kqebmkjfj0prmyygls2y.jpg"}
length: 1
__proto__: Array(0)

我在后端接收[object Object]，而不是我需要的url。有人可以帮我解决这个问题吗？在此先感谢

Answer 1

我认为问题出在您的axios.all（...）代码。您传入的是两个值，但是这些值中包含.map，它们都返回URL。因此，两个索引上的axios.post（）将上传图像，但axios.all（）将具有来自.map（）函数的返回值，该函数是一个promise数组。您可以尝试这样。

async function uploadImages(imgForProduct, screenshots) {
  const URL = "https://api.cloudinary.com/v1_1/ahkji7ation/image/upload";

  //Collect all the form datas for img and screenshots
  const imgForProductFormData = imgForProduct.map((img) => {
    const fd = new FormData();
    fd.append("file", img);
    fd.append("upload_preset", "sublimation");
    return fd;
  });
  const screenShotsFormData = screenshots.map((img) => {
    const fd = new FormData();
    fd.append("file", img);
    fd.append("upload_preset", "sublimation");
    return fd;
  });

  const imgForProductRequests = imgForProductFormData.map(
    async (fd) => await axios.post(URL, fd).catch((err) => null)
  );
  const screenshotsRequests = screenShotsFormData.map(
    async (fd) => await axios.post(URL, fd).catch((err) => null)
  );

  try {
    const imgForProductResponses = await axios.all(imgForProductRequests);
    imgForProductResponses.map((res) => (res[0] ? imgUrl.push(res[0]) : null));

    const screenshotsResponses = await axios.all(screenshotsRequests);
    screenshotsResponses.map((res) => (res[0] ? imgScrSht.push(res[0]) : null));

    let dataObj = {
      email: props.email,
      img: imgUrl,
      screenshot: imgScrSht,
    };
    console.log(dataObj);

    new Promise((resolve, reject) => {
      axios.post("/email_to_ayp_sublimation", dataObj);
      resolve((res) => {
        console.log(res);
      });
      reject((err) => {
        console.log(err);
      });
    });
  } catch(err) {console.log(err)}
}

我不确定axios.all（）的响应是什么样，所以我只做了res [0]。

希望这行得通！