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

Question

我想从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"

Error

Answer 1

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

而不是使用Storage外观来存储文件，你可以使用Request本身：

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

Storing uploaded files

---

您的JS代码似乎有一些问题。

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

@change="fileSkUpload"

或者你必须自己通过这个活动：

@change="fileSkUpload($event)"  

$event docs

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