图片上传-无法通过Controller访问文件

时间:2018-09-16 17:30:18

标签: laravel vue.js vuejs2 getuikit

我正在尝试使用我的api路由和UIKit 3(请参见https://getuikit.com/docs/upload)上传表单来上传图片。

这是我的Vue标记:

    <form class="uk-form" method="post" enctype="multipart/form-data">
        <div>
            <div class="uk-card uk-card-default uk-card-body uk-padding-remove">
                <div class="js-upload uk-placeholder uk-text-center uk-width-expand uk-height-1-1">
                    <div uk-form-custom class="uk-position-center">
                        <input type="file" multiple>
                        <span class="uk-link uk-icon-link" uk-icon="icon: cloud-upload;  ratio: 3.5"
                              v-show="!uploading"></span>
                        <span uk-spinner="ratio: 3.5" v-show="uploading"></span>
                    </div>
                </div>
            </div>
        </div>
    </form>
<script>
export default {

    data () {
        return {
            images: [],
            uploading: false
        }
    },
    mounted () {

        axios
        .get ('/api/image/get')
        .then (response => (this.images = response.data));

        let tokenElement = document.head.querySelector ('meta[name="csrf-token"]');
        let token;

        if (tokenElement) {
            token = tokenElement.content;
        } else {
            console.error ('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
        }

        let vueInstance = this;

        UIkit.upload ('.js-upload', {

            url: '/api/image/upload',
            multiple: false,

            beforeSend: function (environment) {
                environment.data.append ('_token', token);
            },

            loadStart: function (e) {
                vueInstance.uploading = true;
            },

            completeAll: function (e) {
                setTimeout (function () {
                    vueInstance.uploading = false;
                }, 1000);

                 axios
                 .get ('/api/image/get')
                 .then (response => (vueInstance.images = response.data));
            }

        });

    }
}
</script>

这是我在api.php中的/routes

Route::middleware('auth:api')->get('/image/get', 'ImageApiController@getImage')
    ->name('image.get');

Route::post('/image/upload', 'ImageApiController@uploadImage')
    ->name('image.upload');

这是我的控制器:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;


class ImageApiController extends Controller
{


    /**
     * Edit the user images.
     *
     * @param \Illuminate\Http\Request $request
     *
     * @return \Illuminate\Http\JsonResponse
     */
    public function getImage(Request $request)
    {
        //Just testing
    }

    /**
     * Update the user image.
     *
     * @param  \Illuminate\Http\Request $request
     *
     * @return \Illuminate\Http\Resources\Json\
     *
     */
    public function uploadImage(Request $request)
    {
        //Just testing
        return $request;
    }
}

但是不幸的是,该请求不包含任何文件?这是上传响应:

{
    "_token": "HtCltpExKsP1t...jh1P7oKmelSWp",
    "files": [
        {}
    ]
}

那么我该怎么做才能从请求中获取文件?

一如既往:非常感谢您的帮助!

0 个答案:

没有答案