如何在JavaScript的FormData中添加Laravel的common_id？

你的问题出在两个关键错误上，修正后即可实现通过FormData传递common_id：

错误分析 #

1. Blade变量未正确解析：你写的const commonId = "$common->id"是将字符串$common->id直接赋值给变量，而非让Laravel解析输出实际的ID值。
2. FormData.append方法使用错误：该方法的正确格式是append(name, value)，你传了三个参数，且字段名写成了hidden，和原隐藏输入框的name="common_id"不匹配。

正确实现方式 #

方式一：直接在JS中注入Laravel变量 #

在你的JS代码开头，让Blade直接输出$common->id的值：

// 先定义全局或局部变量，让Blade解析输出实际ID
const commonId = {{ $common->id }}; // 如果ID是字符串类型，改为 "{{ $common->id }}"

$("#done").click(function(){
    let upload_image = mainCanvas.toDataURL('image/png', 98)
    let one_file = urlToFile(upload_image)
    uploadOne(one_file)
});

// ... 省略urlToFile函数 ...

let uploadOne = (file) => {
    const url = "http://127.0.0.1:8000/store"
    
    const payload = new FormData()
    payload.append('file', file)
    // 按原隐藏输入框的name字段，添加common_id到FormData
    payload.append('common_id', commonId)

    fetch(url, {
        method: "POST",
        body: payload,
        processData: false,
        contentType: false, 
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    })
}

方式二：通过按钮的data属性传递ID（更优雅） #

给触发按钮添加data属性存储ID：

<button id="done" data-common-id="{{ $common->id }}">完成上传</button>

然后在JS中获取并传递：

$("#done").click(function(){
    // 从按钮的data属性中获取ID
    const commonId = $(this).data('common-id');
    let upload_image = mainCanvas.toDataURL('image/png', 98)
    let one_file = urlToFile(upload_image)
    // 将ID传递给uploadOne函数
    uploadOne(one_file, commonId)
});

// ... 省略urlToFile函数 ...

// 修改uploadOne函数，接收commonId参数
let uploadOne = (file, commonId) => {
    const url = "http://127.0.0.1:8000/store"
    
    const payload = new FormData()
    payload.append('file', file)
    payload.append('common_id', commonId)

    fetch(url, {
        method: "POST",
        body: payload,
        processData: false,
        contentType: false, 
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    })
}

这样后端就能通过$request->common_id获取到对应的值，和原隐藏输入框的效果完全一致。

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