Laravel + Vue $ request-> hasFile ('image') возвращает ноль

Question

• Laravel 5.7
• upload_max_filesize = 200 м
• post_max_size = 250 м

$request->hasFile('image') возвращает ноль, хотя я отчетливо вижу запрос, содержащий ключ изображения, возвращающийся с действительным base64 (проверено, что он является изображением)

Контроллер

if ($request->hasFile('image')) {
    return 'yes';
}else{
    echo 'no';
    return $request->all();
}

передний

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

Сценарии

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));
         }
    }

У меня есть расширение vue для Chrome, и я вижу, что файл установлен в data.image, когда я выбираю файл.

Что мне здесь не хватает?

Answer 1

В вашем контроллере

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);
    }
}

В вашем компоненте vue

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

Answer 2

hasFile не работает, потому что это не файл.Вы уже конвертировали файл в base64 и публикуете его как json, чтобы получить доступ к base64 как $ request-> input ('image') - тогда вам нужно сделать следующее: Как сохранить изображение PNG на стороне сервераиз строки данных base64

Если вы хотите загрузить файл и получить доступ к нему на стороне сервера с помощью hasFile, то вы можете сделать что-то вроде:

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