vue.js Tinymce图像上传中出现“不允许使用Post方法”错误

ldioqlga  于 2022-12-23  发布在  Vue.js
关注(0)|答案(1)|浏览(194)

我试图在我的tinymce编辑器中以vueidojs的形式包括图像上传容量。当我浏览和上传图像时,它一直给我405错误。
Symfony\组件\HttpKernel\异常\方法不允许的HttpException:此路由不支持POST方法。支持的方法:得到,头。
现在,我尝试对表单提交路由和图像上载路由都使用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方法的错误?是的,我试过清除路由缓存。
注:我觉得我应该澄清这一点,但该表单最初是一个发布请求,并以这种方式工作正常。我只是将其更改为获取请求,因为我担心它可能会干扰图像上传功能。但表单提交没有问题。唯一的问题是图像上传功能认为它是一个发布路径,而实际上它显然不是。

4xrmg8kj

4xrmg8kj1#

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

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/

相关问题