axios 使用redux工具包在react中上传多个图像

bcs8qyzn  于 2022-11-05  发布在  iOS
关注(0)|答案(1)|浏览(147)

我有一个功能,上传多个图像,并发送到服务器:

const handleFileChange = (e) => {
       const images = e.target.files;
       const formData = new FormData();
       formData.append('image', images);

       if (images) {
         dispatch(uploadProductImage(formData));
       }
     };

但是,当调度此命令时,发送的有效负载是image:[object FileList]所以默认情况下这个数组是空的,服务器发送的响应也是一个空数组。
我的uploadProductImage()看起来像:

export const uploadProductImage = createAsyncThunk('products/uploadProductImage',
    async (formData, thunkAPI) => {
    return uploadProductImageThunk('/uploadImage', formData, thunkAPI);
    });

我试着把图片分散开,但根本不需要这样做。我也试着直接传递图片,但没有效果。我用同样的设置上传了一张图片,我知道它可能会有点不同,但我还找不到任何有帮助的文章。

nue99wik

nue99wik1#

找到了一个答案。因为它是一个包含嵌套对象的对象,所以我所做的就是遍历该对象,然后将每一项追加到formData中。

const handleFileChange = (e) => {
    const images = e.target.files;
    const formData = new FormData();

    for (let image of images) {
      formData.append('image', image);
    }

    if (images) {
      dispatch(uploadProductImage(formData));
    }
  };

感谢@abolfazl帮我朝那个方向看。

相关问题