我正在将图像上传到 cloudinary onChange，但在将响应图像 URL 保存为状态数组或对象时遇到挑战

Question

上传我的图像后，我的响应返回将有安全的图像URL。但是，我想将URL保存为图像URL的数组或对象，因为它们是我的产品库。

 const multipleFilesUpload = async (files) => {
    const formData = new FormData();

    for (let i = 0; i < files.length; i++) {
      let file = files[i];
      formData.append("file", file);
      formData.append("upload_preset", "kwingy");

      axios
        .post("https://api.cloudinary.com/v1_1/kwjsjsy/image/upload", formData)
        .then((response) => {
          console.log(response.data.secure_url);
        });
    }
  };

将图像上传时，将其记录到多个图像的URL。 因为我想将其传递给我的数据库

。

我如何将URL作为状态数组或对象保存， ：//res.cloudinary.com/kwingy/image/upload/v1648607946/tudifdsk2j0dy77tpumze.png“ rel =“ nofollow noreferrer”> https://res.cloudinary.clinary.com/kwingy/image/image/image/upload/v166464646464644tpynptnypnempen g < /a> index.tsx：48：18 index.tsx：48：18 index.tsx：48：18

Answer 1

您可以重构代码以对上传进行排队，同时运行它们，然后拉出安全链接并将它们写入数据库。像这样：

  const multipleFilesUpload = async (files) => {
    const formData = new FormData();

    const postPromises = []
    for (let i = 0; i < files.length; i++) {
      let file = files[i];
      formData.append("file", file);
      formData.append("upload_preset", "kwingy");
      postPromises.push(axios.post("https://api.cloudinary.com/v1_1/kwjsjsy/image/upload", formData))
    }
    try {
      const results = await Promise.all(postPromises)
      // Now pull out the urls and write to your DB...
      console.log('secure_urls', results.map(({data:{secure_url}})=>secure_url))
    } catch (error) {
        // if any of the uploads fail, they all fail
        console.log(error)
    }
  }

您可以将值放入状态变量中：

// state variable to hold your values
const [secureUrls] = useState([])

const multipleFilesUpload = async (files) => {
    const formData = new FormData();

    for (let i = 0; i < files.length; i++) {
      let file = files[i];
      formData.append("file", file);
      formData.append("upload_preset", "kwingy");

      axios
        .post("https://api.cloudinary.com/v1_1/kwjsjsy/image/upload", formData)
        .then((response) => {
          console.log(response.data.secure_url);
          // add url to the array of urls
          secureUrls.push(response.data.secure_url)
        });
    }
  };