Ruby on Rails API + VueJS + CKEditor 图片上传到S3

Question

我的后端有一个 Rails API，前端有一个 Vue.JS 应用程序。有一些功能允许用户将图像上传到 AWS S3（我将 Base64 图像发送到 API 并使用 Carrierwave 上传文件......它就像一个魅力！）

但现在我必须允许用户在 CKEditor5 中写入文本并在正文文本中插入图像。最好的方法是怎么做？我正在考虑在 HTML 正文中发送 Base64 图像并将它们提取到 API 中，但我正在寻找更好的 approach/ideas.

谢谢！

Answer 1

最后，我在查看 CKEditor 文档时发现了这个 link： https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/simple-upload-adapter.html

所以我意识到有一个 uploadUrl 参数来设置我的 back-end 端点，它应该只是 return de AWS S3 url 在文本中神奇地被替换body 瞧！

        simpleUpload: {
            // The URL that the images are uploaded to.
            uploadUrl: 'http://example.com',

            // Enable the XMLHttpRequest.withCredentials property.
            withCredentials: true,

            // Headers sent along with the XMLHttpRequest to the upload server.
            headers: {
                'X-CSRF-TOKEN': 'CSRF-Token',
                Authorization: 'Bearer <JSON Web Token>'
            }
        }

我在想一个完整的疯狂解决方案，而不是正确阅读文档！

Ruby on Rails API + VueJS + CKEditor 图片上传到S3

Ruby on Rails API + VueJS + CKEditor image upload to S3

ruby-on-rails

amazon-s3

ckeditor

carrierwave

vue.js