使用 VueJS、axios 和 Laravel 上傳文件

Question

您好，我正在構建一個項目。 用戶最多可以發送 5 張圖片和最多 10 首帶有文本的歌曲。 但是當我向服務器發送請求時，我用 Laravel 處理，我無法獲取這些文件。

 // 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>

我把前端的東西放在上面，在我的 Laravel 端我只返回所有請求：

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

這些是我從請求中得到的：

我找不到問題所在。 先感謝您。

Answer 1

這是我的解決方案

 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

哦耶！ 你錯過了這部分。 你需要定義它。

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

Answer 3

看看這個帖子，也許你的問題已經解決了：

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