Vue/Laravel图像上传问题可以'；t将图像传递给laravel

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

{
“照片”：{}，
“nid”：{}，
“地址”：“达卡”，
“upazila”：493，
“紧急联系人”：“01719123886”，
“血液”：“A（阳性）”
}

但在vue中，当我

控制台日志

它时，我会得到所有数据：

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>

以下是我的方法：

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的新手。请帮帮我。

首先，在您的

标签中添加一个

ref=“foo”

，您可以在此阅读有关refs的更多信息。然后您也可以将

@change=“handleFileUpload（）”

添加到您的

标记中

handleFileUpload（）

如下所示：

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

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

然后在submit函数中，您将有如下内容：

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

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

---

另外，不要忘记在标题中添加

Content Type=multipart/form data

。这允许Web服务器知道您正在传递一个文件，而不仅仅是键值对。

这是否回答了您的问题？