Rails下ckeditor图片上传异常，无法实现本地图片上传至AWS并通过URL调用

操作步骤 #

1. 确认CarrierWave AWS基础配置 #

首先确保你已经安装了fog-aws依赖gem，在Gemfile中添加：

gem 'fog-aws'

执行bundle install完成安装后，在config/initializers/carrierwave.rb中填写AWS配置参数：

CarrierWave.configure do |config|
  config.fog_provider = 'fog/aws'
  config.fog_credentials = {
    provider: 'AWS',
    aws_access_key_id: ENV['AWS_ACCESS_KEY_ID'],
    aws_secret_access_key: ENV['AWS_SECRET_ACCESS_KEY'],
    region: ENV['AWS_REGION']
  }
  config.fog_directory = ENV['AWS_S3_BUCKET']
  config.fog_public = true # 需设置公开可读，保证CKEditor可直接展示图片
  config.fog_attributes = { 'Cache-Control' => "max-age=#{365.day.to_i}" }
end

2. 关联CKEditor与CarrierWave上传器 #

执行生成器命令创建CKEditor专属上传组件：

rails generate ckeditor:install --orm=active_record --backend=carrierwave

找到生成的上传器文件app/uploaders/ckeditor/picture_uploader.rb，修改存储配置：

class Ckeditor::PictureUploader < CarrierWave::Uploader::Base
  storage :fog # 将默认的:file存储修改为:fog，对接AWS S3
  # 原有图片裁剪、格式校验等逻辑保留即可
end

3. 开启CKEditor前端上传入口 #

修改config/ckeditor/config.js配置文件，新增上传相关配置：

CKEDITOR.editorConfig = function(config) {
  // 原有配置项保留，新增以下3行配置
  config.filebrowserImageUploadUrl = '/ckeditor/pictures';
  config.filebrowserUploadMethod = 'form';
  config.allowedContent = true; // 避免CKEditor自动过滤img标签属性
};

4. 配置AWS S3访问权限 #

• 给对应IAM账号开放目标S3桶的s3:PutObject、s3:PutObjectAcl权限
• 在S3桶的权限配置中添加CORS规则，允许你的站点域名发起上传请求，示例规则：

[
  {
    "AllowedHeaders": ["*"],
    "AllowedMethods": ["POST", "GET", "PUT"],
    "AllowedOrigins": ["你的站点域名，开发环境可填http://localhost:3000"],
    "ExposeHeaders": []
  }
]

5. 校验依赖环境 #

mini_magick需要调用系统的ImageMagick组件实现图片处理，确保本地和部署环境都已安装：

• Mac系统执行brew install imagemagick
• Ubuntu/Debian系统执行sudo apt-get install imagemagick

所有配置完成后重启Rails服务，即可看到预期的本地上传入口，图片上传后会自动存储到AWS S3，返回的可访问URL会自动插入编辑器。

相关截图 #

• 当前实际效果：
• 预期效果：

内容的提问来源于stack exchange，提问作者Dongha Kim