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

时间:2018-12-26 07:52:04

标签: laravel vue.js

我想从View use Vue获取Laravel的pdf文件。但是它仍然会出错。能帮助我我的代码有什么问题吗?

这是我的剑刃

func setupNavBar() {
        self.title = "Controller title"
        self.navigationController?.navigationBar.prefersLargeTitles = false
        self.navigationController?.navigationItem.largeTitleDisplayMode = .always
        let searchController = UISearchController(searchResultsController: nil)
        searchController.searchBar.delegate = self
        navigationItem.searchController = searchController
    }

这是我获取文件的Vue代码

<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>

这是我的控制器

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

Error

1 个答案:

答案 0 :(得分:0)

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

您可以仅使用Storage本身来代替使用Request门面来存储文件:

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

Storing uploaded files


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

1。。请勿在{{1​​}}中加入括号,因为这将导致@change="fileSkUpload()"不会传递给方法:

event

或者,您必须自己通过活动:

@change="fileSkUpload"

$event docs

2。。我注意到,在您的@change="fileSkUpload($event)" 方法中,您引用的是fileSkUpload,但在您的this.fileSk方法中,您引用的是onSubmit (大写的K)-这些应该相同。

3。。您不需要将this.fileSK包装在对象中。将您的axios呼叫更改为:

FormData