使用 VueJS、axios 和 Laravel 上传文件 [英] Uploading files with VueJS, axios and Laravel
问题描述
您好,我正在构建一个项目.用户可以在其中发送最多 5 张图像和最多 10 首带有文本的歌曲.但是当我向服务器发送请求时,我用 Laravel 处理,我无法获取这些文件.
//我来自 VueJS 的数据对象数据() {返回 {表单数据:新的表单数据(),皮克尔:{身体: '',},isLoading: 假,图片: [],歌曲:[],}}//VuejS 中的 imagePreview 方法图像预览(事件){让输入 = event.target;如果(输入文件[0]){if (input.files.length <= 5) {for (让 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('图片',event.target.files[x], event.target.files[x].name);});} 别的 {alert('您最多可以上传 5 张图片');}}}//VueJS 中的 musicPreview 方法音乐预览(事件){让输入 = event.target;if (input.files.length <= 5) {for (让 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('歌曲',event.target.files[x], event.target.files[x].name);});} 别的 {alert('您最多可以上传 10 首歌曲');}}//VueJS 中的 sharePikir 方法分享皮克尔(){this.formData.append('body', this.pikir.body);axios.put('/api/pikirler', this.formData).then(响应 => {this.pikir.body = '';this.isLoading = false;}).catch(() => {this.isLoading = false;});},
<div class="photo-music left"><label for="music-upload"><i class="fa fa-music"></i>标签><input type="file" name="songs[]" id="music-upload"接受=音频/mp3"@change="musicPreview($event)"多个><i class="divider"></i><label for="image-upload"><i class="fa fa-image"></i>标签><input type="file" name="images[]" id="image-upload"@change="imagePreview($event)"多个>
<div class="share right"><按钮:class="{ 'btn-medium': true, 'is-loading': isLoading }"@click.prevent="sharePikir($event)">派拉什马克按钮>
我把前端的东西放在上面,在我的 Laravel 端,我只返回所有请求:
公共函数 store(){返回请求()-> 全部();}
这些是我从请求中得到的:
我找不到问题所在.提前致谢.
噢耶!你错过了这一部分.你需要定义这个.
axios.defaults.headers.post['Content-Type'] = 'multipart/form-data';
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.
Oh yeah! you're missing this part. You need to define this.
axios.defaults.headers.post['Content-Type'] = 'multipart/form-data';
这篇关于使用 VueJS、axios 和 Laravel 上传文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!