无法从 froala 所见即所得编辑器将图像上传到亚马逊 s3答案

【问题标题】：unable to upload image to amazon s3 from froala WSIWYG editor无法从 froala 所见即所得编辑器将图像上传到亚马逊 s3
【发布时间】：2019-09-30 12:22:45
【问题描述】：

我正在使用 froala 编辑器，它也可以将图像上传到 s3，我按照文档here 中提到的步骤进行操作

s3 存储桶上的 CORS 配置

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
        <CORSRule>
            <AllowedOrigin>*</AllowedOrigin>
            <AllowedMethod>GET</AllowedMethod>
            <AllowedMethod>POST</AllowedMethod>
            <AllowedMethod>PUT</AllowedMethod>
            <MaxAgeSeconds>3000</MaxAgeSeconds>
            <AllowedHeader>*</AllowedHeader>
        </CORSRule>
</CORSConfiguration>

服务器端代码

router.route('/get_signature')
  .get((req, res) => {
    var configs = {
      // The name of your bucket.
      bucket: process.env.AWS_BUCKET_NAME,

      // S3 region. If you are using the default us-east-1, it this can be ignored.
      region: 'us-east-1',

      // The folder where to upload the images.
      keyStart: process.env.AWS_BUCKET_PROJECT_NAME + '/' + process.env.AWS_BUCKET_BLOGS,

      // File access.
      acl: 'public-read',

      // AWS keys.
      accessKey: process.env.AWS_ACCESS_KEY_ID,
      secretKey: process.env.AWS_SECRET_ACCESS_KEY
    }

    var s3Hash = FroalaEditor.S3.getHash(configs);
    console.log(JSON.stringify(s3Hash) + " :s3Hash");//this holds the s3Hash
    res.send(s3Hash);
  })

在我的客户端获取请求

$.get('/blog/get_signature', {})
      .done(function (s3Hash) {
        console.log(JSON.stringify(s3Hash) + " :s3Hash"); //hold the response
        $('textarea#froala-editor').froalaEditor({
          imageUploadToS3: s3Hash,
          paragraphFormat: {
            h3: "Blog Title",
            h4: "Abstract",
            body: "Body"
          },
        })
        .on('froalaEditor.contentChanged', function (e, editor) {
            $('#preview').html(editor.html.get());
          })

         .on('froalaEditor.image.uploadedToS3', function (e, editor, link, key, response) {
            // Image was uploaded to the server.
            console.log("Image uploaded to s3 " + JSON.stringify(response));
          })
      })

我试图完美地遵循文档，但图像仍未上传到 s3。我不知道我可能哪里出错了，我进行了研究和研究，但没有找到合适的解决方案。非常感谢任何帮助。

【问题讨论】：

您遇到了什么错误？任何数量的事情都可能出错。还要确保您在 s3 存储桶上正确设置了 CORS 策略。 docs.aws.amazon.com/AmazonS3/latest/dev/cors.html
@ChrisThompson 我已经在 s3 存储桶上添加了 CORS 策略，请检查我的问题的编辑。我没有收到任何错误，只是没有将图像上传到 s3 存储桶。
console.log("图片上传到s3" + JSON.stringify(response)); --> 这不给任何东西？
@JamesDean 不，它没有提供任何东西。事件本身没有被调用。

标签： javascript node.js amazon-s3 image-upload froala

【解决方案1】：

我已经找到了我上面发布的问题的解决方案，发布了一个答案，因为它可能对任何偶然发现这个问题的人有所帮助。

我通过在编辑器的初始化中添加选项imageUploadUrl : false 修复了上传问题。

【讨论】：