Php 使用vuejs在laravel刀片视图中使用文件上载控件添加图像？

这是我从那里获取信息的laravel刀片视图

<form @submit="formSubmit" enctype="multipart/form-data">    
                        @csrf
                            <div class="form-group row">
                                <div class="col-12">
                                    <label>Select Store</label>
                                    <select class="form-control" name="store_id" v-model="form.store_id" required>
                                       <option v-for="store in stores" :key="store.id" v-bind:value="store.id">@{{store.channel_id}}</option>
                                    </select>   
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-12">
                                    <label>Recorded Date</label>
                                    <input type="text" class="flatpickr form-control" v-model="form.recorded_date" name="recorded_date" required> 
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-12">
                                    <label>Upload Bank Receipt</label>
                                    <input class="form-control-file" type="file" @change="handleUpload($event.target.files)" required>   
                                </div>
                            </div> 
</form> 
<script>

var app = new Vue({
    el: '#app',
    mounted: function() {
    },
    data: {
        stores: {!! $stores !!},
        users: {!! $users !!},
        form: {
            user_id: '',
            recorded_date: '',
            photo: null,
            store_id: '',
            cashoutexpenses: []
        }, 
        
    },
    methods: {
        handleUpload(files) {
          this.form.photo = files[0];
        },
        formSubmit: function(e) {
            e.preventDefault();
           axios.post('/cashoutdetails/store',{
                data: this.form,
            })
            .then(response => {
                $(location).attr('href', '/cashoutdetails')
            })
            .catch(function (error) {
                alert('Error');
            }); 
        }
    }
})

</script>

---

调用成员函数getClientOriginalExtension（）时出现错误，如果为null，或者使用path，则在使用文件上载控件时path为null，如果排除文件上载控件，则rest信息将存储在数据库中。

首先，当出现此错误时，如果

dd（$data），请尝试调试代码['bank_receive']

您可能会看到请求为空，您也可以执行

dd（request（）->all（））

查看您接收到的内容，同时检查元素并转到网络选项卡查看浏览器发送的内容

我敢肯定，您的问题是因为

内容类型

在发送文件时，您必须将其作为

多部分/表单数据

发送，在普通html表单请求中，您将添加

enctype='多部分/表单数据'

，您必须在javascript重新请求中执行相同的操作

试试这个，作为第三个参数，您可以将传统选项传递给请求

axios.post('/cashoutdetails/store', {
    data: this.form,
}, {
   headers: {
       'Content-Type': 'multipart/form-data'
   }
}).then(...

注意：只有在发送文件时才应传递此标头，因此，如果用户可以在不发送文件的情况下发送请求，则必须对其进行测试

---

另外，您正在以

photo

的形式传递参数，并且从未尝试在控制器代码中获取此参数，这让人困惑谢谢！！但它同样不起作用..下面是有效的代码-

 formSubmit: function(e) {
            e.preventDefault();
            let currentObj = this;
           // let data = new FormData();
            let formData = new FormData()
            formData.append('store_id', this.form.store_id);
            formData.append('recorded_date', this.form.recorded_date);
            formData.append('photo', this.form.photo); 
            formData.append('closing_report_total', this.form.closing_report_total);
            formData.append('total_deposit', this.form.total_deposit);
            formData.append('difference', this.form.difference);
            formData.append('form.cashoutexpenses', this.form.cashoutexpenses);
            formData.append('prepared_by', this.form.prepared_by);
            formData.append('deposited_by', this.form.deposited_by);
            formData.append('deposit_date', this.form.deposit_date);
            formData.append('reference_number', this.form.reference_number);
            formData.append('comments', this.form.comments);
            let config = { headers: { 'Content-Type': 'multipart/form-data' } }
            axios.post('/cashoutdetails/store', formData ,config)
            .then(response => {
                //$(location).attr('href', '/cashoutdetails')
                alert('data saved');
            })
            .catch(function (error) {
                alert('Error');
            }); 
        }

 formSubmit: function(e) {
            e.preventDefault();
            let currentObj = this;
           // let data = new FormData();
            let formData = new FormData()
            formData.append('store_id', this.form.store_id);
            formData.append('recorded_date', this.form.recorded_date);
            formData.append('photo', this.form.photo); 
            formData.append('closing_report_total', this.form.closing_report_total);
            formData.append('total_deposit', this.form.total_deposit);
            formData.append('difference', this.form.difference);
            formData.append('form.cashoutexpenses', this.form.cashoutexpenses);
            formData.append('prepared_by', this.form.prepared_by);
            formData.append('deposited_by', this.form.deposited_by);
            formData.append('deposit_date', this.form.deposit_date);
            formData.append('reference_number', this.form.reference_number);
            formData.append('comments', this.form.comments);
            let config = { headers: { 'Content-Type': 'multipart/form-data' } }
            axios.post('/cashoutdetails/store', formData ,config)
            .then(response => {
                //$(location).attr('href', '/cashoutdetails')
                alert('data saved');
            })
            .catch(function (error) {
                alert('Error');
            }); 
        }