如何将存储DataURL格式图片的数组通过表单输入域提交到服务端

报错原因 #

• error_log() expects parameter 1 to be string, array given报错的直接原因：json_decode解析成功后返回的是数组类型，error_log仅支持接收字符串参数，不能直接打印数组。
• 前端隐藏域逻辑错误：你为每个图片单独创建带索引的数组类name属性，会将一维图片数组拆分为多个二维数组，额外增加后端解析成本；且serialize()方法作用于单个输入框无效，该方法需要绑定到完整表单元素上执行。

推荐解决方案 #

方案1：表单提交场景（兼容原有隐藏域实现逻辑） #

前端修改

直接将整个图片数组序列化后存入单个隐藏域即可，无需逐个创建输入框：

// 序列化整个DataURL数组
const imgArrayStr = JSON.stringify(savedImageFilesArray_complex_form)
// 创建单个隐藏域
const input = document.createElement("input")
input.type = "hidden"
input.name = "finalImageFiles"
input.value = imgArrayStr
appendArea.appendChild(input)
// 后续正常提交表单即可，无需单独执行序列化操作

后端处理

// 读取序列化字符串，json_decode第二个参数填true将结果转为数组
$imgArray = json_decode($request->input('finalImageFiles'), true);
// 打印数组需先通过print_r转为字符串，避免error_log类型报错
error_log(print_r($imgArray, true));

// 遍历处理每个图片项，拆分文件名和base64内容
foreach($imgArray as $imgItem) {
    list($fileName, $base64Str) = explode(',', $imgItem, 2);
    // 此处可添加base64转存为本地文件的逻辑
}

方案2：AJAX提交场景（更简洁，无需操作DOM） #

如果是异步提交场景，无需创建隐藏域，直接传递JSON格式参数即可：

前端代码

fetch('你的服务端接口地址', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    // 若框架要求CSRF校验，此处补充对应的token头即可
  },
  body: JSON.stringify({
    finalImageFiles: savedImageFilesArray_complex_form,
    // 其余表单参数也可统一放在此处传递
  })
}).then(res => res.json()).then(res => {
  // 处理接口返回结果
})

后端处理逻辑和方案1完全一致。

注意事项 #

如果DataURL体积较大，需要提前调整php.ini配置项的post_max_size和upload_max_filesize参数值，避免参数被截断导致JSON解码失败。

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