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

Posted 2023-02-22

【中文标题】使用 axios 在 React 中上传多个图像

【英文标题】：Upload Multiple Image in React using axios

【发布时间】：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 来帮助我回答这个问题吗？谢谢德鲁

【参考方案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 属性。我从来没有做过任何形式的进度处理，所以这是我目前所能得到的。

哦，好的，谢谢德鲁！