使用 axios 在 React 中上传多个图像答案

【问题标题】：Upload Multiple Image in React using axios使用 axios 在 React 中上传多个图像
【发布时间】：2022-01-18 08:17:14
【问题描述】：

我在这里遇到了多个图像的问题。我的问题是我想通过 API 上传多张图片。 API 无法通过一个请求处理它。所以才想一张一张上传图片，一张一张调用API。我该怎么做？

export const saveImages =
  ({ images = [], oldImages, isNew }) =>
  async (dispatch) => {
    try {
      dispatch({
        type: constants.REQUEST,
      });

      let responses;

      if (images?.length) {
        let formData = new FormData();

        const requests = images.map(({ imageFileName, imageFile }) => {
          formData.append(imageFileName, imageFile);
          formData.append("isNewProduct", isNew);
          
          return axios.post(
            `${URL}/saveImages`,
            formData
          );
        });

        responses = await Promise.all(requests);
      }

      dispatch({
        type: constants.SUCCESS,
        payload: [...(oldImages || []), ...response?.data],
      });
    } catch (error) {
      dispatch({
        type: constants.FAILURE,
      });
    }
  };

【问题讨论】：

看起来这不是关于 React 而是axios library
您是否在问如何迭代images 数组并发出单独的网络请求？如果您无法批量上传到 "/bulk-upload-image" 端点，那么它有什么意义？您是否有不同的端点用于单个单独的上传？你已经尝试过什么？
@DrewReese。是的，我想迭代图像并发出单独的 api 请求。这是我到目前为止所尝试的。我的问题是我想发出多个请求，但必须等待其他人完成并成功发送一个。
response = await axios.post(`${URL}/bulk-upload-image`, formData); 不会一次性处理所有这些并为您带来成功吗？如果您确实需要将它们拆分为单独的请求，则将图像映射到 Promises 数组 (axios.post) 和 await Promise.all(....) 它们。当所有映射的承诺都解决时，Promise.all 解决。
@DrewReese。我不想在一个请求中处理它们。如果可能的话，我正在尝试多个请求。你能通过映射图像并使用 Promise.all 来帮助我回答这个问题吗？谢谢德鲁

标签： reactjs ecmascript-6 react-hooks axios

【解决方案1】：

如果您确实需要将它们拆分为单独的请求，则将图像映射到 Promises 数组 (axios.post) 和 await Promise.all(....) 它们。当所有映射的 Promise 都解决后，Promise.all 就会解决。

export const uploadMultipleImages = ({ images }) => async (dispatch) => {
  try {
    dispatch({ type: constants.REQUEST });

    // Map images to array of axios.post Promises
    const requests = images.map(({ imageFileName, imageFile })=> {
      const formData = new FormData();
      formData.append(imageFileName, imageFile);
      return axios.post(`${URL}/upload-image`, formData);
    });

    // await all promises to resolve, responses is an array of all
    // resolved Promise values, i.e. whatever the POST requests
    // return
    const responses = await Promise.all(requests);

    dispatch({
      type: constants.SUCCESS,
      payload: responses,
    });
  } catch (error) {
    dispatch({ type: constants.FAILURE });
  }
};

如果我在之前的问题上没记错的话，有时图像会缺少属性，所以如果仍然是这种情况，那么您可能需要在映射到 POST 请求之前使用 .filter 函数。

【讨论】：

@Joseph 我认为它可能应该是payload: [...(oldImages || []), ...responses],，但除此之外，是的，似乎没问题。可能只想给responses 一个初始值，即let responses = []，这样如果没有发出POST 请求，那么你只会传播一个空数组。
@Joseph 哦，您只使用了一个 formData 对象并继续附加到它。请注意，在我的回答中，会为每个请求创建一个新的 formData。它在地图回调内部。
@Joseph await 在 Promise.all 上，因为它返回一个 Promise。
@Joseph 在request config 中似乎有一个onUploadProgress 属性。我从来没有做过任何形式的进度处理，所以这是我目前所能得到的。
哦，好的，谢谢德鲁！