Загрузка изображения - файл не может быть доступен через контроллер - PullRequest
Новая
       26

Загрузка изображения - файл не может быть доступен через контроллер

0 голосов
/ 16 сентября 2018

Я пытаюсь загрузить изображение, используя мои 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": [
        {}
    ]
}

Так что я мог сделать, чтобы получить файл из запроса?

Как всегда: любая помощь высоко ценится!

...