无法从 froala 所见即所得编辑器将图像上传到 amazon s3
unable to upload image to amazon s3 from froala WSIWYG editor
我正在使用 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。我不知道我可能哪里出错了,我已经研究和研究但没有找到合适的解决方案。非常感谢任何帮助。
我已经找到我上面发布的问题的解决方案,发布一个答案,因为它可能对任何偶然发现这个问题的人有所帮助。
我通过在编辑器的初始化中添加选项 imageUploadUrl : false
来解决上传问题。
我正在使用 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。我不知道我可能哪里出错了,我已经研究和研究但没有找到合适的解决方案。非常感谢任何帮助。
我已经找到我上面发布的问题的解决方案,发布一个答案,因为它可能对任何偶然发现这个问题的人有所帮助。
我通过在编辑器的初始化中添加选项 imageUploadUrl : false
来解决上传问题。