Json 如何使用tinymce编辑器上载图像

我在我的Laravel应用程序中使用tinymce编辑器，我想使用图像上传插件，我为该插件向post控制器发出post请求，但当我调用url时，我得到了methodnotallowed exception的错误

以下是我的编辑器代码：

tinymce.init({                              
 selector: '#description',
convert_urls: false,
statusbar: false,  

plugins: 'image code print preview fullpage  searchreplace autolink directionality  visualblocks visualchars fullscreen image link    table charmap hr pagebreak nonbreaking  toc insertdatetime advlist lists textcolor wordcount   imagetools    contextmenu colorpicker textpattern media ',
    toolbar: 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat |undo redo | image code| link fontsizeselect  | ',

    images_upload_url: '{{url("/admin/upload")}}',

    // override default upload handler to simulate successful upload
    images_upload_handler: function (blobInfo, success, failure) {
        var xhr, formData;

        xhr = new XMLHttpRequest();
        xhr.withCredentials = false;
        xhr.open('POST', '{{url("/admin/upload")}}');
      if(xhr.status = 400){  err= "Invalid file name or Extension";}else if(xhr.status = 500){  err="Server Error";}else if(xhr.status = 403){  err="Origin Denied";}
        xhr.onload = function() {
            var json;

            if (xhr.status != 200) {
                failure('HTTP Error: ' + xhr.status +' '+err);
                return;
            }

            json = JSON.parse(xhr.responseText);

            if (!json || typeof json.location != 'string') {
                failure('Invalid JSON: ' + xhr.responseText);
                return;
            }

            success(json.location);
        };

        formData = new FormData();
        formData.append('file', blobInfo.blob(), blobInfo.filename());

        xhr.send(formData);
    },
});

这是我使用的控制器：

Route::prefix('admin')->group(function() {
Route::post('/upload', 'tinyupload@store');
});

我的控制器逻辑是：

public function store(Request $request)
{


// Allowed origins to upload images
$accepted_origins = array("http://localhost", "http://107.161.82.130", "http://abhidemo.com");

// Images upload path
$imageFolder = "uploads/";

reset($_FILES);
$temp = $_FILES['file']['name'];
if(is_uploaded_file($temp['tmp_name'])){
    if(isset($_SERVER['HTTP_ORIGIN'])){
        // Same-origin requests won't set an origin. If the origin is set, it must be valid.
        if(in_array($_SERVER['HTTP_ORIGIN'], $accepted_origins)){
            header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
        }else{
            header("HTTP/1.1 403 Origin Denied");
            return;
        }
    }

    // Sanitize input
    if(preg_match("/([^\w\s\d\-_~,;:\[\]\(\).])|([\.]{2,})/", $temp['name'])){
        header("HTTP/1.1 400 Invalid file name.");
        return;
    }

    // Verify extension
    if(!in_array(strtolower(pathinfo($temp['name'], PATHINFO_EXTENSION)), array("gif", "jpg", "png"))){
        header("HTTP/1.1 400 Invalid extension.");
        return;
    }

    // Accept upload if there was no origin, or if it is an accepted origin
    $filetowrite = $imageFolder . $temp['name'];
    $imagefull=$serverimg.$filetowrite;
    move_uploaded_file($temp['tmp_name'], $filetowrite);

    // Respond to the successful upload with JSON.
    echo json_encode(array('location' => $imagefull));
} else {
    // Notify editor that the upload failed
    header("HTTP/1.1 500 Server Error");
}


}

我面临的问题是，当我试图通过我的编辑器将图像上传到服务器时，它根据我的代码和方法错误地显示了错误类型的文件不允许出现异常，即使我在两侧使用相同的方法帖子

在js中添加此代码：

<script>
     tinymce.init({                              
 selector: '#description',
convert_urls: false,
statusbar: false,  

plugins: 'image code print preview fullpage  searchreplace autolink directionality  visualblocks visualchars fullscreen image link    table charmap hr pagebreak nonbreaking  toc insertdatetime advlist lists textcolor wordcount   imagetools    contextmenu colorpicker textpattern media ',
    toolbar: 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat |undo redo | image code| link fontsizeselect  | ',

    image_title: true,
            automatic_uploads: true,
            images_upload_url: '{{url("/admin/upload")}}',
            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];

                    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();
            }
        });
                               </script><meta name="csrf-token" content="{{ csrf_token() }}" />

在js中添加此代码：

<script>
     tinymce.init({                              
 selector: '#description',
convert_urls: false,
statusbar: false,  

plugins: 'image code print preview fullpage  searchreplace autolink directionality  visualblocks visualchars fullscreen image link    table charmap hr pagebreak nonbreaking  toc insertdatetime advlist lists textcolor wordcount   imagetools    contextmenu colorpicker textpattern media ',
    toolbar: 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat |undo redo | image code| link fontsizeselect  | ',

    image_title: true,
            automatic_uploads: true,
            images_upload_url: '{{url("/admin/upload")}}',
            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];

                    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();
            }
        });
                               </script><meta name="csrf-token" content="{{ csrf_token() }}" />

---

如果您不介意的话，错误到底是什么？方法不允许异常http 500内部服务器错误以及为什么

{{url（“/admin/upload”）}“

而不是xhr请求中的“

”/admin/upload“

”？因为当我以这种方式尝试时，它不起作用，我的意思是不调用我在控制器中定义的路由方法，所以我以laravel方式使用它。这也会导致无效路径，尝试使用postman并向该路径发出post请求，然后在控制器中转储请求内容，看看是否正确。如果您介意，具体错误是什么？方法不允许异常http 500内部服务器错误以及为什么

'{url（“/admin/upload”）}“

而不是xhr请求中的“

”/admin/upload“

”？因为当我以这种方式尝试时，它不起作用，我的意思是不调用我在控制器中定义的路由方法，所以我以laravel方式使用它。这也会导致无效路径，尝试使用postman并向该路径发出post请求，然后在控制器中转储请求内容并查看是否正确如何在控制器中获取映像的temerory path如何在控制器中获取映像的temerory path