Question

我想在TinyMCE编辑器中上传图片。我找到了in the docs的说明。

这些是我的Javascript设置：

tinymce.init({ 
       selector: '#about',          
       images_upload_url: '/home/profile/about/img',
     });

tinymce.activeEditor.uploadImages(function(success) {
      $.post('/home/profile/about/img', tinymce.activeEditor.getContent()).done(function() {
        console.log("Uploaded images and posted content as an ajax request.");
      });
    });

我创建了以下路线来检查是否所有设置都正确

Route::post('/home/profile/about/img', function(){
 return json_encode(['location' => '/storage/app/public/pictures/bestAvatar.png' ]);
});

我预计当我上传图片时，不会上传任何内容并显示图片bestAvatar.png - 但是我收到了错误：

我错过了什么吗？可能是因为在tinymce ajax调用中没有默认的csrf令牌吗？

Answer 1

这就是我解决它的方法：

tinymce.init({ 
       selector: '#about',          
       images_upload_handler: function (blobInfo, success, failure) {
           var xhr, formData;
           xhr = new XMLHttpRequest();
           xhr.withCredentials = false;
           xhr.open('POST', '/home/profile/about/img');
           var token = '{{ csrf_token() }}';
           xhr.setRequestHeader("X-CSRF-Token", token);
           xhr.onload = function() {
               var json;
               if (xhr.status != 200) {
                   failure('HTTP Error: ' + xhr.status);
                   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);
       }
     });

Answer 2

一般来说 419 错误是 csrf 令牌错误，这意味着您需要添加

protected $except = [
    //
    '/upload',
];

在您的 VerifyCsrToken.php 文件中。

点击链接获得更多理解 About TinyMCE 419 Error in Laravel

我遇到了同样的问题。在我的网站上查看如何解决此问题。

Answer 3

是的，你有权利。尝试添加：

'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

到ajax标题

Laravel：TinyMCE上传图片

3 个答案: