使用Froala编辑器无法将图片上传到本地服务器

3
我正在尝试使用Froala所提供的所见即所得编辑器上传图片到我的本地主机(用于测试目的),但是它没有起作用。当我选择要上传的图像时,它会在编辑器中变暗,然后在我单击其他区域时消失。以下是我的代码和我尝试遵循的链接其文档。

文档: https://www.froala.com/wysiwyg-editor/docs/concepts/image/upload

还有这个方法,但我不知道该把PHP放到哪里:https://www.froala.com/wysiwyg-editor/docs/sdks/php/image-server-upload

我的代码

(“fedit”是我用于textarea的类。)

Javascript:

<script>
  $(function() {
    $('.fedit').froalaEditor({
        // Set the image upload parameter.
        imageUploadParam: 'file',

        // Set the image upload URL.
        imageUploadURL: '/upload_image.php',

        // Additional upload params.
        imageUploadParams: {class: 'fedit'},

        // Set request type.
        imageUploadMethod: 'POST',

        // Set max image size to 5MB.
        imageMaxSize: 5 * 1024 * 1024,

        // Allow to upload PNG and JPG.
        imageAllowedTypes: ['jpeg', 'jpg', 'png']
      })
      .on('froalaEditor.image.beforeUpload', function (e, editor, images) {
        // Return false if you want to stop the image upload.
      })
      .on('froalaEditor.image.uploaded', function (e, editor, response) {
        // Image was uploaded to the server.
      })
      .on('froalaEditor.image.inserted', function (e, editor, $img, response) {
        // Image was inserted in the editor.
      })
      .on('froalaEditor.image.replaced', function (e, editor, $img, response) {
        // Image was replaced in the editor.
      })
      .on('froalaEditor.image.error', function (e, editor, error, response) {
        // Bad link.
        else if (error.code == 1) { ... }

        // No link in upload response.
        else if (error.code == 2) { ... }

        // Error during image upload.
        else if (error.code == 3) { ... }

        // Parsing response failed.
        else if (error.code == 4) { ... }

        // Image too text-large.
        else if (error.code == 5) { ... }

        // Invalid image type.
        else if (error.code == 6) { ... }

        // Image can be uploaded only to same domain in IE 8 and IE 9.
        else if (error.code == 7) { ... }

        // Response contains the original server response to the request if available.
      });
  });
</script>

upload_image.php

<?php
    // Allowed extentions.
    $allowedExts = array("gif", "jpeg", "jpg", "png", "blob");

    // Get filename.
    $temp = explode(".", $_FILES["file"]["name"]);

    // Get extension.
    $extension = end($temp);

    // An image check is being done in the editor but it is best to
    // check that again on the server side.
    // Do not use $_FILES["file"]["type"] as it can be easily forged.
    $finfo = finfo_open(FILEINFO_MIME_TYPE);
    $mime = finfo_file($finfo, $_FILES["file"]["tmp_name"]);

    if ((($mime == "image/gif")
    || ($mime == "image/jpeg")
    || ($mime == "image/pjpeg")
    || ($mime == "image/x-png")
    || ($mime == "image/png"))
    && in_array(strtolower($extension), $allowedExts)) {
        // Generate new random name.
        $name = sha1(microtime()) . "." . $extension;

        // Save file in the uploads folder.
        move_uploaded_file($_FILES["file"]["tmp_name"], getcwd() . "/uploads/ " . $name);

        // Generate response.
        $response = new StdClass;
        $response->link = "/uploads/" . $name;
        echo stripslashes(json_encode($response));
    }
?>

这里的信息不足,你的JS控制台提供了任何信息吗?或者你的服务器错误日志呢? - cmorrissey
您IP地址为143.198.54.68,由于运营成本限制,当前对于免费用户的使用频率限制为每个IP每72小时10次对话,如需解除限制,请点击左下角设置图标按钮(手机用户先点击左上角菜单按钮)。 - KeepCool
他们在网站上提供了一个SDK,你为什么不使用它呢? - cmorrissey
很不幸,我在编程方面并不是很高级。虽然我相当熟悉php,但我从来没有真正理解过什么是SDK。它是你使用的替代“upload_image.php”,还是与之一起使用? https://www.froala.com/wysiwyg-editor/docs/sdks/php. - KeepCool
我不确定是否应该将 PHP 代码放在这里并命名为 upload_image.php,还是应该将它们与上面的代码放在同一个文件中?请参考 https://www.froala.com/wysiwyg-editor/docs/sdks/php/image-server-upload。 - KeepCool
我搞定了!我会更新帖子或回答自己的问题,告诉所有像我一样遇到问题的人我是如何解决的。感谢cmorrissey让我知道我应该更深入地研究sdk。 - KeepCool
1个回答

1
这是使用php SDK在本地主机上使其工作的解决方案(我正在使用WAMP)。感谢上面评论区中的cmorrissey让我了解到SDK。
在此处下载SDK文件: https://www.froala.com/wysiwyg-editor/docs/sdks/php 请按照以下说明操作: https://www.froala.com/wysiwyg-editor/docs/sdks/php/image-server-upload 但我会向您展示代码并提到对我有问题的几个要点。
将此JavaScript放置在包含文本区域的页面底部:
<script>
  $(function() {
    $('.selector').froalaEditor({
      // Set the image upload URL.
      imageUploadURL: '/mywebsite/upload_image.php'
    })
  });
</script>

请注意,您的“imageUploadURL:”(upload_image.php)路径指向本地服务器的根目录。例如,无论“http://localhost”指向哪里。所以在我的情况下,我将我的网站放在根目录的子文件夹中,所以我会把“/mywebsite/upload_image.php”放在那里(实际上位于C:\wamp64\www\mywebsite中)。
在upload_image.php文件中:
<?php

// Include the editor SDK.
require 'froala/sdk/lib/FroalaEditor.php';

// Store the image.
try {
  $response = FroalaEditor_Image::upload('/mywebsite/img/uploads/');
  echo stripslashes(json_encode($response));
}
catch (Exception $e) {
  http_response_code(404);
}

?>

正如您所看到的,我复制了SDK“ lib”文件夹(您上面下载的)到我创建的名为“ froala / sdk /”的子文件夹中。您可以将其放置在任何位置。

另一个重要的快速提示是他们犯了一个笔误。在他们的示例PHP代码中,他们告诉您文件名为“froala_editor.php”,但实际上在下载的文件中它被命名为“FroalaEditor.php”。这是我遇到的问题之一。

现在应该一切都可以工作了。您只需要在将其上传到Web服务器时修改路径即可。


我在本地测试时遇到了同样的问题。我访问了一个本地文件并尝试在编辑器上显示,但是出现了相同的问题。 但是我正在使用TypeScript和Angular 2。 你能帮忙吗? - Edgar

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接