VueJs 및 Larabel을 사용하여 여러 파일 업로드

VueJs 및 Larabel을 사용하여 여러 파일 업로드

여러 파일을 업로드하기 위해 한 번의 투고 요청을 하려고 합니다.이제 여러 파일에 사용할 수 있는 기능적 방법이 생겼습니다.하지만 한 가지 부탁이 있습니다.

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>

코드를 수정해야 했기 때문에 답변이 제대로 검증되지 않았습니다.안 되거나 뭔가 부족한 게 있으면 알려주세요.

기본적으로, 저는 보다 유연하고 재사용하기 쉽도록 자신만의 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();
        }
    }
}

추가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(){
            //
        });
    })
},

언급URL : https://stackoverflow.com/questions/60187372/upload-multiple-file-with-vuejs-and-laravel