我正在尝试使用我的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": [
{}
]
}
那么我该怎么做才能从请求中获取文件?
一如既往:非常感谢您的帮助!