Php 使用vuejs和laravel上传文件，无需表单

我正在使用vue.js 2.1和Laravel 5.4从没有表单的组件上传文件

问题：在服务器端，此语句

return$request->file（'my_file'）返回null。为什么?

以下是vue组件的外观：

<template>
    <input id="my_file" type="file" @change="fileChanged($event)">
    <button v-if="my_file" @click="update">Upload</button>
</template>

<script>
export default {
    data () {
        return {
            my_file: null,
        }
    },

    methods: {
        fileChanged(e) {
            var files = e.target.files || e.dataTransfer.files;
            if (!files.length)
                return;
            this.createImage(files[0]);
        },

        createImage(file) {
            var image = new Image();
            var reader = new FileReader();
            var vm = this;

            reader.onload = (e) => {
                vm.my_file = e.target.result;
            };
            reader.readAsDataURL(file);
        },

        update() {
            axios.put('/api/update/', {
                my_file: this.my_file,
            })
            .then(response => {
                console.log(response.data);
            })
            .catch(error => {
                console.log(error);
            });
        }
    }
}
</script>

我错过了什么？所以我可以使用函数
$request->file（'my_file'）->store（）由Laravel提供，用于上载文件

编辑
我已将http动词从
put
更改为
post
，如下所示：

trySomeThing () {
    var data = new FormData();
    var file = this.$refs.fileInput.files[0];
    data.append('attachment_file', file);
    data.append('msg', 'hello');

    axios.post('/api/try', data)
        .then(response => {
            console.log(response.data)
        });
},

在控制器上，我有：

public function try(Request $request)
{
    if ($request->hasFile('my_file')) {
        $file = $request->file('my_file');
        //$file->getFilename();
        return var_dump($file);
    } else {
        return var_dump($_POST);
    }
}

请求标头包含：

返回的响应显示：

首先将Vue引用添加到文件输入中

<input id="my_file" type="file" @change="fileChanged($event)" ref="fileInput">

在您的laravel应用程序中：

if ($request->hasFile('my_file')) {
   $file = $request->file('my_file');
   dd($file);
}

有关详细信息：
您的视图应该如下所示

<template>
<div class="row">
    <div class="col-md-12">
        <div class="col-md-2">
            <img :src="image" class="img-responsive">
        </div>
        <div class="col-md-8">
            <input type="file" v-on:change="onFileChange" class="form-control">
        </div>
        <div class="col-md-2">
            <button class="btn btn-success btn-block" @click="upload">Upload</button>
        </div>
       </div>
   </div>
</template>
<style scoped>
img{
    max-height: 36px;
}
</style>
<script>
    export default{
    data(){
        return {
            image: ''
        }
    },
    methods: {
        onFileChange(e) {
            let files = e.target.files || e.dataTransfer.files;
            if (!files.length)
                return;
            this.createImage(files[0]);
        },
        createImage(file) {
            let reader = new FileReader();
            let vm = this;
            reader.onload = (e) => {
                vm.image = e.target.result;
            };
            reader.readAsDataURL(file);
        },
        upload(){
            axios.post('/api/upload',{image: this.image}).then(response => {

            });
        }
    }
}
</script>


上传
img{
最大高度：36px；
}
导出默认值{
数据（）{
返回{
图像：“”
}
},
方法：{
onFileChange（e）{
让files=e.target.files | | e.dataTransfer.files；
如果（！files.length）
返回；
此.createImage（文件[0]）；
},
createImage（文件）{
let reader=new FileReader（）；
让vm=这个；
reader.onload=（e）=>{
vm.image=e.target.result；
};
reader.readAsDataURL（文件）；
},
上传（）{
post（'/api/upload'，{image:this.image}）{
});
}
}
}
在vuejsHow中使用
formData
是否从服务器端检索数据？我试图
返回$request->my_文件但返回null。在chrome开发工具上，我看到发送的请求包含：
----WebKitFormBoundary9lOFAy36UFyjOmoh内容处置：表单数据；name=“附件文件”；filename=“794a4be39f0b96b4d5787e3e31f8b622.jpg”内容类型：image/jpeg------WebKitFormBoundary9lOFAy36UFyjOmoh
我在php测试中添加了一个else。它返回
else
块中的内容。这意味着
$request->hasFile（'my_file'）
返回了
false
。请查看我的问题编辑。我甚至试过用post。php不明白。@Warrio你能试着检查
$request->hasFile（'attachement_file'）
？@Ikbel:FormData不适用于动词PUT:\但适用于POST！！是的，我想如果这对他有效，对我也一定有效。。我将创建一个新项目，从头再来一次，看看与我的项目有什么不同。@Warrio我在这里不使用任何形式。我用你建议的代码创建了一个新项目。不幸的是，它再次返回null。这里是指向存储库
git克隆的链接git@bitbucket.org：warrio4/pr1.git
请看一看
if ($request->hasFile('my_file')) {
   $file = $request->file('my_file');
   dd($file);
}

<template>
<div class="row">
    <div class="col-md-12">
        <div class="col-md-2">
            <img :src="image" class="img-responsive">
        </div>
        <div class="col-md-8">
            <input type="file" v-on:change="onFileChange" class="form-control">
        </div>
        <div class="col-md-2">
            <button class="btn btn-success btn-block" @click="upload">Upload</button>
        </div>
       </div>
   </div>
</template>
<style scoped>
img{
    max-height: 36px;
}
</style>
<script>
    export default{
    data(){
        return {
            image: ''
        }
    },
    methods: {
        onFileChange(e) {
            let files = e.target.files || e.dataTransfer.files;
            if (!files.length)
                return;
            this.createImage(files[0]);
        },
        createImage(file) {
            let reader = new FileReader();
            let vm = this;
            reader.onload = (e) => {
                vm.image = e.target.result;
            };
            reader.readAsDataURL(file);
        },
        upload(){
            axios.post('/api/upload',{image: this.image}).then(response => {

            });
        }
    }
}
</script>