有没有更简单的方法来发出这些 axios post 请求？

Question

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

我可以将所有图片上传到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，它们是 returning url。因此，两个索引上的 axios.post() 将上传图像，但 axios.all() 将具有来自 .map() 函数的 return 值，这是一个承诺数组。你可以尝试这样的事情。

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)}
}

希望这有效！

有没有更简单的方法来发出这些 axios post 请求？

Is there an easier way to make these axios post reqest?

javascript

mailgun

reactjs

axios