使用 VueJS、axios 和 Laravel 上传文件

Question

Hello I am building one project. Where user can send up to 5 images and up to 10 songs with the text. But when I send request to the server, where I handle with Laravel, I can't get those files.

 // my data object from VueJS data() { return { formData: new FormData(), pikir: { body: '', }, isLoading: false, images: [], songs: [], } } // imagePreview method from VuejS imagePreview(event) { let input = event.target; if (input.files[0]) { if (input.files.length <= 5) { for (let i = 0; i < input.files.length; i++) { let reader = new FileReader(); reader.onload = e => { this.images.push(e.target.result); } reader.readAsDataURL(input.files[i]); } Array.from(Array(event.target.files.length).keys()).map(x => { this.formData.append('images', event.target.files[x], event.target.files[x].name); }); } else { alert('You can upload up to 5 images'); } } } // musicPreview method from VueJS musicPreview(event) { let input = event.target; if (input.files.length <= 5) { for (let i = 0; i < input.files.length; i++) { this.songs.push(input.files[i].name.replace('.mp3', '')); } Array.from(Array(event.target.files.length).keys()).map(x => { this.formData.append('songs', event.target.files[x], event.target.files[x].name); }); } else { alert('You can upload up to 10 songs'); } } // sharePikir method from VueJS sharePikir() { this.formData.append('body', this.pikir.body); axios.put('/api/pikirler', this.formData).then(response => { this.pikir.body = ''; this.isLoading = false; }).catch(() => { this.isLoading = false; }); },

 <form action="#" id="share-pikir"> <label for="pikir"> Näme paýlaşmak isleýärsiňiz? {{ pikirSymbolLimit }} </label> <input type="text" name="pikir" id="pikir" maxlength="255" v-model="pikir.body" @keyup="handleSymbolLimit()"> <div class="emoji"> <a href="#"><i class="fa fa-smile-o"></i> </a> </div> <div class="photo-music left"> <label for="music-upload"> <i class="fa fa-music"></i> </label> <input type="file" name="songs[]" id="music-upload" accept="audio/mp3" @change="musicPreview($event)" multiple> <i class="divider"></i> <label for="image-upload"> <i class="fa fa-image"></i> </label> <input type="file" name="images[]" id="image-upload" @change="imagePreview($event)" multiple> </div> <div class="share right"> <button:class="{ 'btn-medium': true, 'is-loading': isLoading }" @click.prevent="sharePikir($event)"> Paýlaşmak </button> </div> </form>

I put my front end stuff above and in my Laravel side I just return all requests:

public function store(){
    return request()->all();
}

And these are what I get from request:

I couldn't found what is wrong. Thank you in advance.

Answer 1

this my solutuion

 export default { data (){ return { attachment : { name : null,file: null } } }, methods : { onFileChange(event) { this.attachment.file = event.target.files[0] }, attachmentCreate() { var form = new FormData(); form.append('name',this.attachment.name); form.append('file',this.attachment.file); this.$http.post('attachment',form).then(response=>{ console.log("oke") }) }, } } 

 <input type="file" class="form-control" @change="onFileChange"> 

Answer 2

Oh yeah! you're missing this part. You need to define this.

axios.defaults.headers.post['Content-Type'] = 'multipart/form-data';

Answer 3

Check this post, maybe your problem is solved:

[https://stackoverflow.com/questions/55895941/success-upload-file-via-postman-but-fail-on-front-end-vue/73698108#73698108][1]