Vue 3 + Laravel 9 API - processing formData multiple files

Question

I'm currently trying to process multiple files from a Vue frontend to a Laravel backend API. I succesfully uploaded a single file. The problem I'm facing at the moment is that I can't find a way to access an array of files in my API.

My form data structure looks like this:

postSingle(data) {

    let formData = new FormData();
    formData.append('title', data.formInputs.title.value);
    formData.append('description', data.formInputs.description.value);
    formData.append('audiofiles', data.formInputs.audiofiles.value);

    return axios.post(API_URL, formData,
        { headers: authHeader( 'fileUpload' ) });
}

'audiofiles' contains the following data [screenshot of console log data.formInputs.audiofiles.value]

How do I access these audiofiles in the backend via $request?

Answer 1

you need to use loop try this way

postSingle(data) {

    let formData = new FormData();
    formData.append('title', data.formInputs.title.value);
    formData.append('description', data.formInputs.description.value);

    Object.keys(data.formInputs.audiofiles.value).forEach((key) => {
       formData.append('audiofiles[]', data.formInputs.audiofiles.value[key])
    })

    return axios.post(API_URL, formData,
        { headers: authHeader( 'fileUpload' ) });
}