Qfyilyi

• Laravel 5.7


• upload_max_filesize = 200m


• post_max_size = 250m

$request->hasFile('image') is returning null, even though I can clearly see the request holding an image key returning with a valid base64 (validated it to be an image)

controller

if ($request->hasFile('image')) {

    return 'yes';

}else{

    echo 'no';

    return $request->all();

}

front

<form @submit.prevent="saveOoi" enctype="multipart/form-data">

    <div><img :src="image" class="embed-responsive"></div>

    <input type="file" v-on:change="onFileChange" class="form-control mb-3" name="image">

</form>

scripts

data() {

    return {

                image: '',

                errors: new Errors(),

            }

        },    

methods: {

        onFileChange(e) {

            let files = e.target.files || e.dataTransfer.files;

            if (!files.length)

                return;

                this.createImage(files[0]);

                this.$data.image = files[0];

         },

         createImage(file) {

             let reader = new FileReader();

             let vm = this;

             reader.onload = (e) => {

             vm.image = e.target.result;

             };

         reader.readAsDataURL(file);

         },

         saveOoi() {

             axios.post('ooi', this.$data)

             .then(response => console.log('sent', response))

             .catch(error => this.errors.record(error.response.data));

         }

    }

i have the vue extension for chrome and I can see that the file is set in data.image when I pick the file.

What am I missing here?

hasFile doesn't work because it's not a file. You already converted the file to base64 and post it as json so you would access the base64 as $request->input('image') - then, you have to do this: How to save a PNG image server-side, from a base64 data string

If you want to upload a file and access it on the server-side with hasFile, then you can do something like:

const fd = new FormData()

fd.append('image', this.file)

fd.append('type', this.name)  // any other fields

// fd.append... more fields

axios.post('ooi', fd)

<b-form-file

  :id="fileName"

  v-model="file"

/>

In your controller

public function store(Request $request)

{

    if($request->hasFile('image_file')){

        $file = $request->file('image_file');

        $name_image = time().$file->getClientOriginalName();

        $file->move(public_path().'/images/', $name_image);

    }

}

In your vue component

<template>

  <form method="post" enctype="multipart/form-data">

  <div class="image">

      <input type="file" id="image_file" :v-model="image_file" name="image_file" @change="onFileChange"

        accept="image/*" class="input-file">

         <p v-if="!url">Click to browse your image</p>

        <img v-if="url" :src="url" class="img img-responsive full-width" />

    </div>

  </form>

</template>

<style>



</style>

<script>

export default{

   data(){

        return{

           url: null

        }

   },



   methods: {

      onFileChange(e) {

         let files = e.target.files || e.dataTransfer.files;

         if (!files.length) {

             console.log('no files');

         }

         console.log(files);

         console.log(files[0]);

         const file = files[0];

         this.url = URL.createObjectURL(file);

         const formData = new FormData();

         formData.append('image_file', file, file.name);

         axios.post('http://127.0.0.1/....', formData, {}).then((response) => {

            console.log(response.data)

         })

         .catch(function(err){

             console.log(err)

         });

      }

   }

}

</script>