Question

我正在使用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放到我身上。因此，似乎它找到了图像并正在加载，但是随后失败了。预先感谢！

Laravel / Vue图片上传i-viewUI

0 个答案: