Rails Active Storage文件上传失败：Vue FormData请求异常排查

1. 修正Vue端请求逻辑 #

你当前的核心问题是没有正确构建FormData请求体，错误地将FormData嵌套在普通JS对象中，导致文件无法被正确传递。修改register方法如下：

async register() {
    try {
        const formData = new FormData();
        // 将标题和图片都加入FormData，遵循Rails参数嵌套习惯
        formData.append('goal[title]', this.title);
        if (this.imageFile) {
            // has_many_attached对应数组格式参数，支持单/多文件上传
            formData.append('goal[images][]', this.imageFile, this.imageFile.name);
        }

        // 直接传递FormData作为请求体，axios会自动设置multipart/form-data请求头
        const res = await axios.post(
            import.meta.env.VITE_APP_API_BASE + '/goals',
            formData
        );
        console.log(res);
    } catch (error) {
        console.log({ error })
    }
}

关键修正： #

• 所有请求参数直接写入FormData，不再嵌套普通对象
• 用goal[字段名]的格式匹配Rails参数解析规则，让后端能正确捕获参数
• 针对has_many_attached :images使用数组格式goal[images][]，兼容单/多文件场景
• 无需手动设置multipart/form-data头，axios检测到FormData时会自动配置正确的请求头

2. 修正Rails Controller强参数 #

当前强参数未处理嵌套参数，且未针对has_many_attached配置数组许可，修改如下：

class GoalsController < ApplicationController
    def create
        @goal = Goal.create(goal_params)
        render json: { goal: @goal }, status: 200
    end

    private
    def goal_params
        # 嵌套参数解析 + 允许images数组
        params.require(:goal).permit(:title, images: [])
    end    
end

关键修正： #

• 用params.require(:goal)获取嵌套参数，对应Vue端的goal[xxx]格式
• 通过images: []明确许可数组格式参数，让Rails能正确解析上传文件并关联到Active Storage

3. 错误根源说明 #

• 初始请求日志中images=>{}：因FormData被嵌套在普通对象中，axios将其序列化为空对象，文件未实际传递
• 添加手动头后出现InvalidSignature：手动设置头导致axios未正确处理FormData边界符，同时参数格式错误触发Rails签名验证异常

额外检查项 #

• 确认已执行rails active_storage:install和数据库迁移，Active Storage基础配置完成
• 确保Rails的CORS配置允许multipart/form-data类型请求

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