时间戳

首页 > 解决方案 > 如何使用 Vue 在 Laravel 中上传文件 PDF

laravel - 如何使用 Vue 在 Laravel 中上传文件 PDF

问题描述

我想从 View 使用 Vue 到 Laravel 获取文件 pdf 文档。但它仍然是错误的。可以帮助我的代码有什么问题吗？

这是我的刀片

<template>
    <form class="form" files="true" method="post" @submit.prevent="onSubmit" enctype="multipart/form-data">
        <div class="form-group">
            <label>File SK
                <input type="file" multiple class="form-control-file" name="fileSk" id="fileSk" ref="fileSk"
                       @change="fileSkUpload()"/>
            </label>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</template>

这是我获取文件的 Vue 代码

fileSkUpload(event) {
    let files = event.target.files;
    if (files.length) this.fileSk = files[0];
},

onSubmit() {
    let data = new FormData();
    data.append('fileSk', this.fileSK);
    data.append('_method', 'put'); // add this

    axios.post('/psu/list/store', {
        data: this.data,
    }).then(response => {
        this.data = ''
    }).catch(error => {
        if (error.response.status === 422) {
            this.errors = error.response.data.errors || {};
        }
    });
},

这是我的控制器

public function store(Request $request)
{
    $dokumen = new Dokumen();
    $psu = new Psu();

    $fileSk = $request->file('fileSk');
    $data = $request->input('fileSk');
    $extension = $fileSk->getClientOriginalExtension();

    Storage::disk('uploads')->put($fileSk->getFileName() . '.' . $extension, File::get($file));

    $dokumen->file_image_dokumen = $fileSk->getFileName() . '.' . $extension;

    $dokumen->save();
}

我得到了这个错误：

"Call to a member function getClientOriginalExtension() on null"

错误

标签： laravelvue.js

解决方案

在您的控制器中，您尚未初始化$file变量。

除了使用Storage外观来存储文件，您还可以使用它Request本身：

$fileSk->storeAs('', $fileSk->getFileName() . '.' . $extension, 'uploads');

存储上传的文件

您的 JS 代码中似乎存在一些问题。

1.不要在其中包含括号，@change="fileSkUpload()"因为这会导致event不传递给方法：

@change="fileSkUpload"

或者，您必须自己通过活动：

@change="fileSkUpload($event)"

$事件文档

2.我注意到在你的fileSkUpload方法中你引用this.fileSk但在你的onSubmit方法中你引用this.fileSK（大写的K） - 这些应该是相同的。

3.您不需要将其包装FormData在一个对象中。将您的 axios 调用更改为：

axios.post('/psu/list/store', data)
    .then(response => {
    this.data = ''
}).catch(error => {
    if (error.response.status === 422) {
        this.errors = error.response.data.errors || {};
    }
});

推荐阅读