Javascript 有没有更简单的方法来制作这些axios post REQUEST？

我正在尝试使用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时，这是我在最后一次调用中发送的内容（新承诺）：

屏幕截图：数组（1）
0:承诺{:https://res.cloudinary.com/ahkji7ation/image/u… 
590871936/ahkji7ation/kqebmkjfj0prmyygls2y.jpg“}
长度：1
__原型：数组（0）

我在后端接收[object]，而不是我需要的url。有人能帮我解决这个问题吗？

---

提前感谢

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

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.data.secure_url) : null));

    const screenshotsResponses = await axios.all(screenshotsRequests);
    screenshotsResponses.map((res) => (res[0] ?imgScrSht.push(res.data.secure_url) : 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)}
}

---

希望这能奏效

是的，这让这个把戏更干净了，我现在可以看到正确的反应了。非常感谢

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.data.secure_url) : null));

    const screenshotsResponses = await axios.all(screenshotsRequests);
    screenshotsResponses.map((res) => (res[0] ?imgScrSht.push(res.data.secure_url) : 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)}
}