как отправить файл на бек вместе с дополнительными полями?

Рейтинг: 0Ответов: 1Опубликовано: 09.02.2023

у меня есть формочка на странице. когда файл добавляется в input:file то файл оттуда (инстанс класса File) добавляется в FormData и input:file очищается для дальнейшего выбора нового файла. при добавлении файла делается следующее

const addFileToList = (inputFile) => {
    const formData = new FormData()
    const uploadedFile = inputFile.files[0] // файл из инпута File{...}
    const uploadedFileWrapper = {}

    uploadedFileWrapper.file = uploadedFile
    uploadedFileWrapper.foo = 'foo'
    uploadedFileWrapper.bar = 'bar'

    formData.append('files[]', uploadedFileWrapper)


    clearInputForm()
    axios.post('localhost://foobarbaz/upload-file', formData)
}

и вот при отправке запроса на бек приходит структура вида

"files" => array:1 [
    0 => "[object Object]"
]

потом я попробовал сделать так

formData.append('files[]', JSON.stringify(uploadedFileWrapper))

и получил это

"files" => array:2 [
    0 => "{"file":{}, "foo": "foo", "bar": "bar"}"
]

т.е. файл опять пустой файл. ну и я ожидаю получить на беке такой результат

"files" => array:1 [
    0 => [
        "file" => UploadedFile...,
        "foo"  => "foo",
        "bar"  => "bar",
    ],
]

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

p.s. реально очень интересно. попробуйте сами так объект с файлом отправить на бек

javascript php formdata axios fileupload
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

функция должна быть такая

const addFileToList = (inputFile) => {
    const formData = new FormData()
    const uploadedFile = inputFile.files[0] // файл из инпута File{...}
    const uploadedFileWrapper = {}

    // внимание на ключи
    formData.append('files[][file]', uploadedFile)
    formData.append('files[][foo]', 'foo')
    formData.append('files[][bar]', 'bar')


    clearInputForm()
    axios.post('localhost://foobarbaz/upload-file', formData)
}

и вот теперь если загрузить 2 файла то на беке можно получить такую структуру

"files" => array:2 [
    0 => array:3 [
      "file" => UploadedFile...,
      "foo" => "foo",
      "bar" => "bar",
    ],
    1 => array:3 [
      "file" => UploadedFile...,
      "foo" => "foo1",
      "bar" => "bar1",
    ],
]