Vue/Laravel图片上传问题无法将图片传递给拉拉维尔

Question

我在上传图像时遇到问题。我得到除图像以外的所有数据，图像显示Laravel:中的空数组

{
"photo": {},
"nid": {},
"address": "Dhaka",
"upazila": 493,
"emergency_contact": "01719123886",
"blood": "A__(positive)"
}

但在vue中，当我console log它时，我会得到所有数据：

address: "Dhaka"
blood: "A+ (positive)"
emergency_contact: "01719123886"
nid: File {name: "Screenshot from 2021-04-26 00-44-47.png", lastModified: 1619376288117, lastModifiedDate: Mon Apr 26 2021 00:44:48 GMT+0600 (Bangladesh Standard Time), webkitRelativePath: "", size: 424975, …}
photo: File {name: "Screenshot from 2021-04-26 00-44-47.png", lastModified: 1619376288117, lastModifiedDate: Mon Apr 26 2021 00:44:48 GMT+0600 (Bangladesh Standard Time), webkitRelativePath: "", size: 424975, …}
upazila: 493

预览也在工作。

这是表格：

<form v-if="userDetails"  @submit.prevent="userProfile()" enctype="application/x-www-form-urlencoded">
<div class="row">
<div class="col-md-6">
<label>Photo <small>(Max. 175kb)</small></label>
<input name="photo" type="file" class="form-control" @change="selectPhoto">
<div v-if="previewPhoto" class="mt-2">
<img :src="previewPhoto" class="img-fluid img-thumbnail" style="max-height: 100px; max-width: 300px"/>
</div>
<small class="text-danger"  v-if="errors.photo" v-for="(error, index) in errors.photo">
{{ error }}
</small>
</div>
<div class="col-md-6">
<label>NID <small>(Max. 200kb)</small></label>
<input type="file"  name="nid" class="form-control" @change="selectNID">
<div v-if="previewNid" class="mt-2">
<img :src="previewNid" class="img-fluid img-thumbnail" style="max-height: 100px; max-width: 300px"/>
</div>
<small class="text-danger"  v-if="errors.nid" v-for="(error, index) in errors.nid">
{{ error }}
</small>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Address</label>
<textarea v-model="userData.address" name="address" class="form-control" rows="2"></textarea>
<small class="text-danger"  v-if="errors.address" v-for="(error, index) in errors.address">
{{ error }}
</small>
<div class="form-group">
<label>Select Upazila</label>
<v-select
:options="upazilas"
:reduce="upazila => upazila.id"
label="name"
v-model="userData.upazila"
placeholder="Select Upazila">
</v-select>
<input type="hidden" name="upazila" v-model="userData.upazila">
<small class="text-danger"  v-if="errors.upazila" v-for="(error, index) in errors.upazila">
{{ error }}
</small>
</div>
</div>
<div class="col-md-6"   >
<label>Skype Id</label>
<input class="form-control" type="text" name="skype" v-model="userData.skype">
<label>FB Id</label>
<input class="form-control" type="text" v-model="userData.facebook" name="facebook">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Emergency Contact</label>
<input class="form-control" type="text" v-model="userData.emergency_contact" name="emergency_contact">
<small class="text-danger"  v-if="errors.emergency_contact" v-for="(error, index) in errors.emergency_contact">
{{ error }}
</small>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Blood Group</label>
<v-select
:options="bloods"
:reduce="blood => blood.name"
label="name"
v-model="userData.blood"
placeholder="Select Blood Group">
</v-select>
<input type="hidden" name="district" v-model="userData.blood">
<small class="text-danger"  v-if="errors.blood" v-for="(error, index) in errors.blood">
{{ error }}
</small>
</div>
</div>
</div>
<input type="submit" value="Submit" class="btn btn-success btn-block mt-3">
</form>

这是我的数据：

data(){
return {
roles : [],
errors:{},
districts : [
{
'name':'Dhaka',
'id':47
}
],
operators:[
{'name' : '017'},
{'name' : '018'},
{'name' : '016'},
{'name' : '019'},
{'name' : '015'},
],
bloods:[
{'name': 'A+ (positive)'},
{'name': 'A- (negative)'},
{'name': 'AB+ (positive)'},
{'name': 'AB- (negative)'},
{'name': 'B+ (positive)'},
{'name': 'B- (negative)'},
{'name': '0+ (positive)'},
{'name': '0- (negative)'},
],
upazilas :[],
userForm : true,
userDetails : false,
resendSection: false,
userData: {},
otp : {},
otp_error: '',
disable : true,
timeOutTitle : 'Resend will available after 180 sec',
previewPhoto : null,
previewNid : null,
photo : null,
}
},

以下是我的方法：

userProfile(){
axios.put(this.baseUrl+'/api/user-profile/'+localStorage.user_id, this.userData,  {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}}).then(res=>{
console.log(res)
}).catch(errors=>{
if (errors.response.status === 422){
this.errors = errors.response.data.errors;
}
})
},
selectPhoto(event){
this.userData.photo = event.target.files[0];
let reader = new FileReader()
reader.readAsDataURL(this.userData.photo)
reader.onload = event =>{
this.previewPhoto = event.target.result
}
},
selectNID(event){
this.userData.nid = event.target.files[0];
let reader = new FileReader()
reader.readAsDataURL(this.userData.nid)
reader.onload = event =>{
this.previewNid = event.target.result
}
},

我是vue的新手。请帮帮我。

Answer 1

首先，在<input>标签中添加一个ref="foo"，您可以在这个链接中阅读更多关于refs的信息。然后，您也可以将@change="handleFileUpload()"添加到您的<input>标签中。

handleFileUpload()将是这样的：

handleFileUpload() {
this.file = this.$refs.foo.files[0];
}

然后在你的提交功能上，你会有这样的东西：

let formData = new FormData()
formData.append('file', this.file);

另外，不要忘记在您的标题中添加Content-Type = multipart/form-data。这允许Web服务器知道您传递的是一个文件，而不仅仅是键值对。