[英]Upload Multiple images in Laravel using Vue.js
我正在尝试在 Laravel 中使用 vue.js 上传图像,因为我正在使用此链接
使用 vue.js 上传图像,当我提交表单时,我在文件数组中获得以下图像
现在的问题是我无法在 laravel 控制器中获取这个文件数组
当我打印
$request->file('files')
在我的控制器中,我得到了空值。 当我打印 $request->input('files') 这是结果时,一个空数组
非常感谢有关此问题的任何帮助。
代码片段:
data() {
return {
rawData: [],
formData: new Form({
files:[],
})
..
const header = {
Authorization: "Bearer " + this.token,
};
this.formData
.post(APP_URL + `/api/post`, { headers: header })
.then((response) => {
}
不确定您是否可以通过this.formData.post
发送 ajax 请求
尝试这个
new Vue({
el: "#app",
data() {
return {
option: {
maxFileCount: 3
},
files:[],
rawData: [],
}
},
methods: {
loaddropfile: function(e) {
e.preventDefault()
e.stopPropagation()
alert('ok')
console.log(e)
},
openinput: function() {
document.getElementById("vue-file-upload-input").click();
},
addImage: function(e) {
const tmpFiles = e.target.files
if (tmpFiles.length === 0) {
return false;
}
const file = tmpFiles[0]
this.files.push(file)
const self = this
const reader = new FileReader()
reader.onload = function(e) {
self.rawData.push(e.target.result)
}
reader.readAsDataURL(file)
},
removeFile: function(index) {
this.files.splice(index, 1)
this.rawData.splice(index, 1)
document.getElementById("vue-file-upload-input").value = null
},
upload: function() {
alert('Check console to see uploads')
console.log(this.files)
axios.post(`${APP_URL}/api/post`,{files:this.files},{ headers: header })
.then((response) => {});
}
},
mounted(){
}
})
它会将您的表单数据发送到files
键,以便您可以通过$request->file('files')
获取所有文件
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.