如何使用axios上传图片数组？

Question

我有一个 React 组件，用户可以在其中上传无限数量的图像，这些图像收集在一个数组中。

我目前正在使用 FormData 上传这些图片以及其他一些文本字段。

但是我不想使用 FormData。有没有更好的方法来使用纯 Axios 上传图像数组等数据？

3 张图片上传后的组件状态

this.state.files = [
   // image file 0,
   // image file 1,
   // image file 2
];

当前的 Axios 函数 - 使用 FormData

let formData = new FormData();

this.state.files.forEach(file => formData.append('files[]',file));

let headers = { 'Content-Type': "multipart/form-data; charset=utf-8; boundary=" + Math.random().toString().substr(2) };

axios.post('/api/upload-images',formData,{headers: headers});

所需的 Axios 函数 - 无 FormData

let headers = { 'Content-Type': "multipart/form-data; charset=utf-8; boundary=" + Math.random().toString().substr(2) };

axios.post('/api/upload-images',{...this.state},{headers: headers});

当我尝试以所需的方式进行操作时，服务器收到的文件是空的。

Answer 1

您可以创建一个自定义的 axios 实例，并将 transformRequest 配置参数设置为一个函数，该函数在存在 multipart/form-data 内容类型 header 时将数据转换为表单。这看起来像下面这样。免责声明：我没有对此进行测试。

// put formAxios in its own module to reuse it across the project
export const formAxios = axios.create({
    transformRequest: [function (data, headers) {
        if (headers['Content-Type'] && headers['Content-Type'].startsWith('multipart/form-data')) {
            const form = new FormData();
            for (const key in data) {
                const value = data[key];
                if (Array.isArray(value)) {
                    const arrayKey = `${key}[]`;
                    value.forEach(v => {
                        form.append(arrayKey, v);
                    });
                } else{
                    form.append(key, value);
                }
            }
            return form;
        }

        return data;
    }],
});

调用它与您的上一个示例完全一样，但使用自定义 axios 实例：

let headers = { 'Content-Type': "multipart/form-data; charset=utf-8; boundary=" + Math.random().toString().substr(2) };

formAxios.post('/api/upload-images', {...this.state}, {headers});

如何使用axios上传图片数组？

How to upload array of images with axios?

multipartform-data

reactjs

axios

3 张图片上传后的组件状态

当前的 Axios 函数 - 使用 FormData

所需的 Axios 函数 - 无 FormData