Блог

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

 import api from './api';

const formData = new FormData();

// File input with multiple attribute
const files = this.$refs.photo.files;

if (files.length > 0) {
  for (let i = 0; i < files.length; i  ) {
    formData.append('files', { file: files[i], someOtherProp: 'value' });
  }
}

api.createArticle(formData);
 

 // api/index.js

import axios from 'axios';
import config from '@/config';

const api = axios.create({
  baseURL: config.api,
  timeout: config.apiTimeout,
});

createArticle(payload) {
  return api.post('/articles', payload, {
    headers: {
      'Content-Type': 'multipart/form-data',
    }
  });
}

export {
  createArticle
};

 

Когда я отправляю запрос, это то, что я получаю

Документация функции добавления FormData показывает, что она принимает два или три параметра (3-й является необязательным).

О втором параметре — value — в нем говорится:

Значение поля. Это может быть строка USV или большой двоичный объект (включая подклассы, такие как файл). Если ни один из них не указан, значение преобразуется в строку.

Ваш код пытается передать объект для этого параметра, а не строку или большой двоичный объект. Поэтому FormData делает именно то, что указано в документации, и преобразует этот объект в строку. [Object object] это то, что JavaScript всегда выводит по умолчанию, если вы пытаетесь напрямую структурировать объект.

Если вы хотите добавить имя файла специально, как вы можете видеть из документации, дополнительный 3-й параметр filename предоставляется специально для этой цели.

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

Также не следует повторно добавлять элементы данных с одним и тем же именем — ваш сервер может видеть только последний. Чтобы это работало наиболее надежным способом , вы должны использовать синтаксис массива, например formData.append("files[]"... , чтобы сервер видел массив данных с этим именем, а не один элемент. Вы можете сделать то же самое для этих дополнительных свойств, которые вы хотите передать, затем вы также можете передать несколько элементов, и их номер индекса будет совпадать с номером индекса файла, с которым они связаны, когда ваш сервер получит опубликованные данные.

Например, что-то вроде этого должно работать лучше:

 for (let i = 0; i < files.length; i  ) {
  formData.append('files[]', files[i]);
  formData.append('someOtherProp[]', 'value');
}