Tinymce 图片上传时出现“Post method not allowed”错误

Question

我正在尝试以 vue.js 形式在我的 tinymce 编辑器中包含图像上传功能。当我浏览并上传图片时，它一直给我405错误。

Symfony\Component\HttpKernel\Exception\MethodNotAllowedHttpException：此路由不支持 POST 方法。支持的方法：GET、HEAD。

现在，我尝试对表单提交路由和图像上传路由使用 get 方法。

Route::get('/news-events/store', 'NewsEventsController@storeNewsEvent')->name('admin.news-event-store');
Route::get('/uploadimag-news', 'NewsEventsController@upload');

表单提交标签：

<form id="addNewNews" action="{{route('admin.news-event-store')}}" method="get" enctype="multipart/form-data" onsubmit="return postForm()">

tinymcr 初始化：

tinymce.init({
                selector: '#news_content',
                plugins: 'lists,imagetools,image',
                toolbar: 'numlist bullist  undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | link image',
                height: 250,
                image_title: true,
                    automatic_uploads: true,
                   images_upload_url: '/uploadimag-news',
                    file_picker_types: 'image',
                    file_picker_callback: function(cb, value, meta) {
                        var input = document.createElement('input');
                        input.setAttribute('type', 'file');
                        input.setAttribute('accept', 'image/*');
                        input.onchange = function() {
                            var file = this.files[0];
                            if(Math.round((this.files[0].size/1024)*100/100) > 200){
                                alert('Image size maximum 200KB');
                                return false
                            }else {
                                var reader = new FileReader();
                                reader.readAsDataURL(file);
                                reader.onload = function () {
                                    var id = 'blobid' + (new Date()).getTime();
                                    var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
                                    var base64 = reader.result.split(',')[1];
                                    var blobInfo = blobCache.create(id, file, base64);
                                    blobCache.add(blobInfo);
                                    cb(blobInfo.blobUri(), { title: file.name });
                                };
                            }
                        };
                        input.click();
                    },

                setup: function (editor) {
                    editor.on('change', function () {
                        editor.save();
                    });
                },
                init_instance_callback : function(editor) {
                    var freeTiny = document.querySelector('.tox .tox-notification--in');
                    freeTiny.style.display = 'none';
                },
            });

很明显，这里没有 post 方法。是什么赋予了？我的错误从哪里获取 post 方法？是的，我已经尝试清除路由缓存。

N.B 编辑：我觉得我应该澄清这一点，但该表格最初是一个帖子请求，这样工作得很好。我只是将其更改为获取请求，因为我担心它可能会干扰图像上传功能。但是表单提交没有问题。唯一的问题是图像上传功能认为它是一个帖子路由，而事实显然不是。

Answer 1

更改您的路线文件并像这样保存，

Route::get('/news-events/store', 'NewsEventsController@storeNewsEvent')->name('admin.news-event-store');
Route::post('/uploadimag-news', 'NewsEventsController@upload');

默认情况下，tinymce 在您提供的上传网址中发送发布请求。

这里是tinymce的文档：https://www.tiny.cloud/docs/tinymce/6/upload-images/

Answer 2

更新您的

VerifyCsrToken.php

文件。

在 except 数组中添加路径。

protected $except = [
     //
     '/uploadimag-news',       
];

你的路线应该是post方法。 导致tinyMCE向该路径发送post请求。

Route::post('/uploadimag-news', [NewsEventsController::class, 'upload']);