我使用vue.js 2.1和Laravel 5.4从没有表单的组件上传文件。
问题:在服务器端,此语句return $request->file('my_file');
返回null。为什么呢?
这是vue组件的样子:
<template>
<input id="my_file" type="file" @change="fileChanged($event)">
<button v-if="my_file" @click="update">Upload</button>
</template>
<script>
export default {
data () {
return {
my_file: null,
}
},
methods: {
fileChanged(e) {
var files = e.target.files || e.dataTransfer.files;
if (!files.length)
return;
this.createImage(files[0]);
},
createImage(file) {
var image = new Image();
var reader = new FileReader();
var vm = this;
reader.onload = (e) => {
vm.my_file = e.target.result;
};
reader.readAsDataURL(file);
},
update() {
axios.put('/api/update/', {
my_file: this.my_file,
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log(error);
});
}
}
}
</script>
在服务器端,我有以下方法:
public function update(Request $request)
{
return $request->file('my_file');
// $request->file('my_file')->store();
}
我错过了什么?所以我可以使用Laravel提供的函数$request->file('my_file')->store();
上传文件。
修改
我已将http动词从put
更改为post
,如下所示:
trySomeThing () {
var data = new FormData();
var file = this.$refs.fileInput.files[0];
data.append('attachment_file', file);
data.append('msg', 'hello');
axios.post('/api/try', data)
.then(response => {
console.log(response.data)
});
},
在控制器上,我有:
public function try(Request $request)
{
if ($request->hasFile('my_file')) {
$file = $request->file('my_file');
//$file->getFilename();
return var_dump($file);
} else {
return var_dump($_POST);
}
}
返回的回复显示:
答案 0 :(得分:1)
首先在文件输入中添加Vue引用。
<input id="my_file" type="file" @change="fileChanged($event)" ref="fileInput">
然后更新您的update
方法:
update() {
var data = new FormData()
var file = this.$refs.fileInput.files[0]
data.append('my_file', file)
axios.put('/api/update/', data)
.then(response => {
console.log(response.data)
})
.catch(error => {
console.log(error)
});
}
在你的laravel应用程序中:
if ($request->hasFile('my_file')) {
$file = $request->file('my_file');
dd($file);
}
了解更多信息:Laravel documentation
答案 1 :(得分:0)
您的观点看起来应该是这样的
<template>
<div class="row">
<div class="col-md-12">
<div class="col-md-2">
<img :src="image" class="img-responsive">
</div>
<div class="col-md-8">
<input type="file" v-on:change="onFileChange" class="form-control">
</div>
<div class="col-md-2">
<button class="btn btn-success btn-block" @click="upload">Upload</button>
</div>
</div>
</div>
</template>
<style scoped>
img{
max-height: 36px;
}
</style>
<script>
export default{
data(){
return {
image: ''
}
},
methods: {
onFileChange(e) {
let files = e.target.files || e.dataTransfer.files;
if (!files.length)
return;
this.createImage(files[0]);
},
createImage(file) {
let reader = new FileReader();
let vm = this;
reader.onload = (e) => {
vm.image = e.target.result;
};
reader.readAsDataURL(file);
},
upload(){
axios.post('/api/upload',{image: this.image}).then(response => {
});
}
}
}
</script>