尝试使用TinyMCE上传图像时出现错误403 [英] Error 403 when trying to upload image using TinyMCE

问题描述

我正在尝试通过TinyMCE上传图像，但是在编辑器本身中显示"HTTP错误:403".我分别从网站上获取了脚本和php页面的代码:

I'm trying to upload images through TinyMCE but am getting "HTTP Error: 403" shown in the editor itself. I've taken the code from the website for both the script and the php page respectively:

tinymce.init({
      selector: "textarea",
      plugins: "link image",

      height:300,
      setup: function (editor) {
        editor.on('change', function () {editor.save();});

      },

    images_upload_handler: function (blobInfo, success, failure) {
    var xhr, formData;

    xhr = new XMLHttpRequest();
    xhr.withCredentials = false;
    xhr.open('POST', 'queries/editorImageUpload.php');

    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);
  }

});

然后在"editorImageUpload.php"中，我认为问题是与$ accepted_origins部分有关，因为它返回了403错误:

And then within 'editorImageUpload.php', I think the problem is to do with the $accepted_origins part as its returning a 403 error:

$accepted_origins = array("https://localhost", "https://77.104.172.194");

  $imageFolder = "pictures/Test/";

  reset ($_FILES);
  $temp = current($_FILES);
  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;
      }
    }

对此有任何见识会很有帮助.

Any insight on this would be very helpful.

推荐答案

首先，您的代码有两个问题
-您的php代码不会将图像传输到服务器
-在您的php代码中，您使用" https://localhost "制作了$ accepted_origins数组，而您忘记了不安全的版本" http://localhost "

First of all you have two problems with your code
-your php code does not transfer the image to the server
-in your php code you are making array of $accepted_origins with "https://localhost" and you forget the unsecured version "http://localhost"

因此，解决您问题的最快方法是编写有效的PHP代码，该代码会将图像传输到您的服务器，并为编辑器返回图像的完整路径，这里是php代码

so the fastest fix for your problem is to write valid php code that will transfer the image to your server and return the image full path for the editor here is the php code

editorImageUpload.php

<?php 
      $ds = DIRECTORY_SEPARATOR;

      $storeFolder = 'images';

      if (!empty($_FILES)) 
      {
             $tempFile = $_FILES['file']['tmp_name'];

             $targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds;

             $file_name = substr(md5(rand(1, 213213212)), 1, 5) . "_" . str_replace(array('\'', '"', ' ', '`'), '_', $_FILES['file']['name']);

             $targetFile =  $targetPath. $file_name;

             if(move_uploaded_file($tempFile,$targetFile)){
                   die( $_SERVER['HTTP_REFERER']. $storeFolder . "/" . $file_name );
              }else{
                   die('Fail');
              }

       }
?>

并且在您的JavaScript回调中，您必须检查xhr.response而不是xhr.responseText，因为您将死于图像的完整路径

and in your javascript callback you have to check for the xhr.response not the xhr.responseText since you are dying with the image full path

Tinymce代码

 tinymce.init({
      selector: "textarea",
      plugins: "link image",
      height:300,

      images_upload_handler: function (blobInfo, success, failure) {
            var xhr, formData;

            xhr = new XMLHttpRequest();
            xhr.withCredentials = false;
            xhr.open('POST', 'editorImageUpload.php');

            xhr.onload = function() {
              var json; 

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

              console.log(xhr.response);
              //your validation with the responce goes here

              success(xhr.response);
            };

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

            xhr.send(formData);
       }

 });

这篇关于尝试使用TinyMCE上传图像时出现错误403的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！