Как загрузить массив изображений с топором ios? - PullRequest
Новая
       16

Как загрузить массив изображений с топором ios?

1 голос
/ 16 января 2020

У меня есть компонент React, в котором пользователь может загружать неограниченное количество изображений, которые собираются в массив.

В настоящее время я использую FormData для загрузки этих изображений вместе с некоторыми другими текстовыми полями.

Однако я хочу уйти от использования FormData. Есть ли лучший способ загрузки данных в виде массива изображений с простым Ax ios?

Состояние компонента после 3-х загрузок изображений 

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

Current Ax ios Функция - Использование 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});

Желаемый топор ios Функция - Нет 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});

Когда я пытаюсь сделать это нужным образом, файлы, полученные сервером, становятся пустыми.

1 Ответ

2 голосов
/ 16 января 2020

Вы можете создать пользовательский экземпляр axe ios и установить параметр конфигурации 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;
    }],
});

Вызов это будет точно так же, как ваш последний образец, но с пользовательским топором ios instance: 

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

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