How do I get images uploaded to s3 and get the link url as a response

问题

Please I am looking for a real help. I followed the Image s3 upload Node.JS | WYSIWYG Javascript HTML Editor | Froala tutorial to be able to upload images to my S3 bucket but all efforts proved abortive.

I could upload the images locally on my computer, and get the link url to display it right in the editor. I can't do this to S3.

I am using express node.js and pug template engine.

The following is my froala script file that initiate the s3Hash and the editor

$.get('/s3/posts-photos' , {})

  .done(function(s3Hash) {

new FroalaEditor('#editor' , {

    'imageUploadToS3' : s3Hash ,

    'imageUploadParams' : {

        'id' : 'me_editor'
    } ,
});         
  });

The following is my pug layout file which other templates extend:

doctype html
html
    head
    title 
    if title
    | #{title} - 
    | Aye Mi


    link(rel='stylesheet' , href='/stylesheets/add.css')
    link(rel='stylesheet' , href='/stylesheets/frola-pk.css')
    link(rel='stylesheet' , href='/stylesheets/frola-style.css')

    meta(name ='viewport' content ='width=device-width , initial-scale=1')

    body
    .container
    h1 #{title}

    block content
    script(src ='/js/froala_editor.min.js')
    script(src ='/js/frola.js')
    script(src ='/js/jquery.js' type ='text/javascript')
    script(src ='/js/frola-script.js' type ='text/javascript')

Don't worry about the arrangement of the layout code as seen above, I did it this way because of the Stack Over Flow Editor. The main problem is the order of how the files at the bottom of the html page is supposed to be. I mean in what order are the four script tags supposed to be.

Note: The last file is mine which is used to initiate the text editor and s3Hash.

This is the code Froala Help Page illustrated we should use:

var express = require('express') , router = express.Router() , FroalaEditor = require('../../../node_modules/wysiwyg-editor-node-sdk/lib/froalaEditor.js');


router.get('/posts-photos', function (req, res) {

  var configs = {
    // The name of your bucket.
    'bucket' : 'article-photo',

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

    // The folder where to upload the images.
    // 'keyStart' : 'uploads',

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

    // AWS keys.
    'accessKey' : '78438743ashzxmnsmeh3',

    'secretKey' : 'akyuasy232'
  }

  var s3Hash = FroalaEditor.S3.getHash(configs);

  res.send(configs);

});

module.exports = router;

The access key and secret key are just pseudo in this case.

When I click insert images. I get this instead in my console.

Uncaught TypeError: Cannot read property 'fn' of undefined
     at frola.js:7
     (anonymous) @ frola.js:7


frola-script.js:142

{code: 4, message: "Parsing response failed."}code: 4message: "Parsing response failed."__proto__: Object
froala_editor.min.js:7 


POST https://eu-central-1.amazonaws.com/article-photo net::ERR_NAME_NOT_RESOLVED

o @ froala_editor.min.js:7
    (anonymous) @ froala_editor.min.js:7

来源：https://stackoverflow.com/questions/57535221/how-do-i-get-images-uploaded-to-s3-and-get-the-link-url-as-a-response

标签

express

amazon-s3

froala