Laravel + Vue $request->hasFile ('image' ) 返回 null

Question

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

$request->hasFile('image') 正在返回 null，尽管我可以清楚地看到持有图像 key 的请求返回一个有效的 base64(验证它是一个图像)

Controller

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

我有 chrome 的 vue 扩展，当我选择文件时，我可以看到文件已设置在 data.image 中。

我在这里错过了什么？

Answer 1

hasFile 不起作用，因为它不是文件。您已经将文件转换为 base64 并将其作为 json 发布，因此您将以 $request->input('image') 的形式访问 base64 - 然后，您必须这样做:How to save a PNG image server-side, from a base64 data string

如果你想上传一个文件并在服务器端使用 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"
/>