Загрузить несколько файлов с VueJs и Laravel

Question

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

submitFile(){
    this.contract_file.forEach((file) =>{
        let formData = new FormData();
        formData.append('file', file.file);

        axios.post('contracts/uploadfile/' + this.id_contract,
            formData,
            {
            headers: {
                'Content-Type': 'multipart/form-data',
            }
        }
        ).then(function(){
            //
        })
        .catch(function(){
            //
        });
    })
},

    public function uploadFile(Request $request, Contract $contract)
    {
            $filename = $request->file('file')->getClientOriginalName();

            $path = $request->file('file')->store($contract->id,'uploads');
            $contractFile = new ContractFile();

            $contractFile->fill([
                'contract_id'   => $contract->id,
                'name'          => $filename,
                'path'          => $path,
            ])->save();
    }

Обновление: Это то, что я изменил, но ..

let formData = []
this.contract_file.forEach((file,index) =>{
    formData[index] = new FormData();
    formData[index].append('file', file.file);
})

foreach($request->file('file') as $file){
    //same code but I use  $fille

}

Сообщение :

Отсутствует граница в данных POST из нескольких частей / данных формы в Неизвестно

Обновление 2:

    <file-upload
    class="btn btn-primary"
    :multiple="true"
    :drop="true"
    :drop-directory="true"
    v-model="files"
    @input-filter="inputFilter"
    @input-file="inputFile"

    ref="upload">
    <i class="fa fa-plus"></i>
    Select files
    </file-upload>

Answer 1

Мой ответ не проверен должным образом, так как мне пришлось адаптировать свой код. Дайте мне знать, если это не сработает или я что-то упустил.

По сути, я построил свои собственные данные FormData, чтобы они были более гибкими и их было проще использовать.

Форма. vue

<template>
<div>
    <input @change="upload($event)"
        type="file"
        name="picture"
        id="new-file"
        class="custom-file-input"
        aria-label="picture"
        multiple
        >
    <label class="custom-file-label" for="new-file">
        <span>File...</span>
        <span class="btn-primary">Browse</span>
    </label>
    <button @click="submit" type="button" >Submit</button>
</div>
<template>

<script>
    import MyFormData from "./MyFormData";

    export default {
        data() {
           return {
               form: new MyFormData({contract_id: 5, files: []})
           }
        },
        methods: {
            upload(event) {
                for (let file of event.target.files) {
                    try {
                        let reader = new FileReader();
                        reader.readAsDataURL(file); // Not sure if this will work in this context.
                        this.form.files.push(file);
                    } catch {}
                }
            },
            submit(){
                this.form.post('/my-url')
                    .catch(errors => {
                        throw errors;
                    })
                    .then((response) => location = response.data.redirect);
            }
        }
    }
</script>

MyFormData. js

export default class MyFormData {
    constructor(data, headers) {
        // Assign the keys with the current object MyFormData so we can access directly to the data: 
        // (new FormData({myvalue: "hello"})).myvalue; // returns 'hello'
        Object.assign(this, data);

        // Preserve the originalData to know which keys we have and/or reset the form
        this.originalData = JSON.parse(JSON.stringify(data));

        this.form = null;
        this.errors = {};
        this.submitted = false;
        this.headers = headers || {}
    }

    // https://stackoverflow.com/a/42483509/8068675
    // It will build a multi-dimensional Formdata
    buildFormData(data, parentKey) {
        if (data && typeof data === 'object' && !(data instanceof Date) && !(data instanceof File) && !(data instanceof Blob)) {
            Object.keys(data).forEach(key => {
                this.buildFormData(data[key], parentKey ? `${parentKey}[${key}]` : key);
            });
        } else {
            const value = data == null ? '' : data;
            this.form.append(parentKey, value);
        }
    }

    // Returns all the new / modified data from MyFormData
    data() {
        return Object.keys(this.originalData).reduce((data, attribute) => {
            data[attribute] = this[attribute];
            return data;
        }, {});
    }

    post(endpoint) {
        return this.submit(endpoint);
    }

    patch(endpoint) {
        return this.submit(endpoint, 'patch');
    }

    delete(endpoint) {
        return axios.delete(endpoint, {}, this.headers)
            .catch(this.onFail.bind(this))
            .then(this.onSuccess.bind(this));
    }

    submit(endpoint, requestType = 'post') {
        this.form = new FormData();
        this.form.append('_method', requestType);
        this.buildFormData(this.data());

        return axios.post(endpoint, this.form, {
            headers: {
                'Content-Type': `multipart/form-data; boundary=${this.form._boundary}`,
            }
        })
            .catch(this.onFail.bind(this))
            .then(this.onSuccess.bind(this));
    }

    onSuccess(response) {
        this.submitted = true;
        this.errors = {};

        return response;
    }

    onFail(error) {

        console.log(error);

        this.errors = error.response.data.errors;
        this.submitted = false;

        throw error;
    }

    reset() {
        Object.assign(this, this.originalData);
    }
}

---

Редактировать На основании вашей заметки, указывающей, что вы используете vue-upload-component

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

submitFile(){

    let files = this.contract_file.map((obj) => obj.file));
    let form = new MyFormData({files: files});

    form.post('contracts/uploadfile/' + this.id_contract)
        .then(function(){
            //
        })
        .catch(function(){
            //
        });
},

В вашем контроллере

public function uploadFile(Request $request, Contract $contract) {
    if($request->hasFile('files')){
        $files = $request->file('files');
        foreach ($files as $file) {
            $filename = $file->getClientOriginalName();
            $path = $file->store($contract->id,'uploads');

            $contractFile = new ContractFile();
            $contractFile->fill([
                'contract_id'   => $contract->id,
                'name'          => $filename,
                'path'          => $path,
            ])->save();
        }
    }
}

Answer 2

Добавление boundary к заголовку Content-Type решило мою проблему. Вы можете сделать это, как показано ниже. Просто измените только submitFile() функцию.

submitFile(){
    this.contract_file.forEach((file) =>{
        let formData = new FormData();
        formData.append('file', file.file);

        axios.post('contracts/uploadfile/' + this.id_contract,
            formData,
            {
            headers: {
                'Content-Type': 'multipart/form-data;boundary=' + Math.random().toString().substr(2),
            }
        }
        ).then(function(){
            //
        })
        .catch(function(){
            //
        });
    })
},