我正在使用 Laravel 和 VueJS 制作一个管理仪表板。我正在尝试将图像上传到数据库,但我什至无法将其加载到页面。我收到 404(未找到)错误,我不知道为什么...???
路线
Route::post('app/upload', 'AdminController@upload');
模式代码
<!-- Tag Add Modal -->
<Modal
v-model="addModal"
title="Add Category"
:mask-closable = "false"
:closable = "false">
<Input v-model="data.tagName" placeholder="Add Category Name" />
<div class="space"></div>
<!-- ref="uploads" -->
<Upload
:default-file-list="defaultList"
:on-success="handleSuccess"
:on-error="handleError"
:format="['jpg','jpeg','png','bmp',]"
:max-size="2048"
:on-format-error="handleFormatError"
:on-exceeded-size="handleMaxSize"
:before-upload="handleBeforeUpload"
type="drag"
:headers = "{'x-csrf-token' : token, 'X-Requested-With' : 'XMLHttpRequest'}"
action="/app/upload">
<div style="padding: 20px 0">
<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
<p>Click or drag files here to upload</p>
</div>
</Upload>
<div class="image_thumb" v-if="data.iconImage">
<img src="/uploads/${data.iconImage}" />
</div>
<div slot="footer">
<button type="default" @click="addModal=false">Close</button>
<button type="primary" @click="addTag" :disabled="isAdding" :loading="isAdding">{{isAdding ? 'Adding..' : 'Add Tag'}}</button>
</div>
</Modal>
模态脚本
<script>
export default {
data() {
return {
data : {
catagoryName: '',
iconImage: '',
},
addModal : false,
editModal: false,
isAdding : false,
isDeleting : false,
showDeleteModal: false,
tags : [],
editData : {
categoryName: '',
iconImage: '',
},
index : -1,
deleteItem: {},
deletingIndex: -1,
token: '',
}
},
控制器
public function upload(Request $request)
{
$this->validate($request,[
'file' => 'required|mimes:jpeg,jpg,bmp,png'
]);
$picName = time().'.'.$request->file->extension();
$request->file->move(public_path('uploads'), $picName);
该文件开始在拖放屏幕中显示几秒钟,然后将 404 放在我身上。所以它似乎找到了图像并加载但随后失败。提前致谢!!