Vue/Laravel Image Upload Problem can't pass image to laravel

Question

I have problem with image upload. I get all data except images, images shows empty array in Laravel:

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

But in vue, when I console log it, I get all data:

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

Also preview is working.

Here is the form:

<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>

Here is my data:

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,
    }
},

Here are my methods:

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
    }
},

I am new at vue. Please help me.

Does this answer your question? [application/x-www-form-urlencoded or multipart/form-data?](https://stackoverflow.com/questions/4007969/application-x-www-form-urlencoded-or-multipart-form-data) — matiaslauriti, Apr 26 '21 at 02:20

score 0 · Answer 1 · answered Apr 26 '21 at 02:24

First, add a ref="foo" to your <input> tag, you can read more about refs in this link. Then you can add a @change="handleFileUpload()" to your <input> tag too.

The handleFileUpload() will be like this:

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

Then on your submit function, you'll have something like this:

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

Also, don't forget to add the Content-Type = multipart/form-data in your header. This allows the webserver to know that you're passing a file instead of just key-value pairs.

Vue/Laravel Image Upload Problem can't pass image to laravel

1 Answers1