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

Question

这是我从中获取信息的 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>

下面是我的控制器代码--

         $data = $request->data;
       //$imageName = time().'.'.$request->image->getClientOriginalExtension();
       //$request->image->move(storage_path('app/public/bankreceipt'), $imageName);
       $contents = file_get_contents($request->image->path());
       $fileName = time().'.'.$data['bank_receipt']->extension();
       return $fileName;
       $cashout_details = CashOutDetail::create([
           'user_id' => Auth::user()->id,
           'store_id' => $data['store_id'],
           'recorded_date' => $data['recorded_date'],
           'bank_receipt'=> $fileName,
       ]);

我收到错误，因为在 null 上调用成员函数 getClientOriginalExtension() 或如果我使用路径 - 那么在使用文件上传控制时路径为 null 如果我排除文件上传控制，其余信息将存储在数据库中。

Answer 1

首先，当得到这个错误时，尝试调试你的代码，如果你dd($data['bank_receipt'])你可能会看到请求为空，你也可以dd(request()->all())看看你收到了什么，结合检查元素并转到网络选项卡以查看浏览器发送的内容

我很确定您的问题是因为在发送文件时Content-Type，您必须将其发送为multipart/form-data，作为一个正常的 html 表单请求，您将添加您必须做的enctype='multipart/form-data'在 javascript 请求中也是如此

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

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

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

您也将参数作为photo 传递，并且从未尝试在控制器代码中获取此参数，这令人困惑

Answer 2

谢谢！！但是它又没用..下面是有效的代码-

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