如何使用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内容类型标头时将数据转换为表单。这看起来类似于以下内容。免责声明：我尚未对此进行测试。

// 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});