Node.js 反应/节点向服务器发送图像数据时出现问题

我有一个问题，我有一些问题发送画布的图像数据到我的服务器来处理它

以下是我发送数据的react/redux操作：

export const edit = (e) => dispatch => {
  let payload = store.getState().image.imageData
  payload = payload[payload.length-1]
  console.log(payload)
  const id = e.target.id ? e.target.id : e.target.parentElement.id
  fetch(`/api/editing/${id}`, {
    method: 'POST',
    // headers: {
    //   "Content-Type": "application/json"
    // },
    body: JSON.stringify({ imgData: payload })
  })
  .then(res => res.json())
  .then(json => {
    dispatch({ type: UPDATE_IMAGE, payload: json.imgData })
    // handle response display
  })
}

以下是我处理请求的方式：

const traitement = require('../../processing/traitement')

router.post('/:type', (req, res) => {
  const { imgData } = req.body
  const method = req.params.type
  const imgDataProcessed = traitement[method](imgData)
  return res.status(200).json({ imgData: imgDataProcessed })
})

下面是一个traitement方法的示例：

negatif: function(imgData) {
  console.log(imgData)
  var n = imgData.data.length;
  for(i=0; i<n; i+=4){
    imgData.data[i] = 255 - imgData.data[i];
    imgData.data[i+1] = 255 - imgData.data[i+1];
    imgData.data[i+2] = 255 - imgData.data[i+2];
    imgData.data[i+3] = 255;        
  }
  return imgData;
},

我无法粘贴从服务器获得的内容，但我丢失了宽度、高度键，typeof是Object而不是ImageData，数据键是typeof Object而不是Uint8ClampedArray

所以我的问题是：我如何才能让我的路线访问我发送的相同数据，以便我能够处理它

正如您所看到的，我将它们作为字符串化json发送，并且我的服务器上有一个json bodyparser中间件，可能就是从那里开始的。 我还考虑了内容类型标题

编辑： 多亏了Kaido，我修改了我的代码，使它在1个版本下工作

我如何修改我的代码，前面：

  let payload = store.getState().image.imageData
  payload = payload[payload.length-1]
  const id = e.target.id ? e.target.id : e.target.parentElement.id;
  console.log(payload)
  const meta = {
    width: payload.width,
    height: payload.height
  }
  const formData = new FormData();
  formData.append("meta", JSON.stringify(meta));
  formData.append("data", new Blob([payload.data.buffer]))
  fetch(`/api/editing/${id}`, {
    method: "POST",
    body: formData
  })
  .then(res => res.arrayBuffer())
  .then(buffer => {
    console.log(buffer)
    const data = new Uint8ClampedArray(buffer)
    console.log(data.length)
    const newImg = new ImageData(data, payload.width, payload.height)
    return newImg
  })

背面：

还有一个问题：假设我使用的是一个150*300px的映像，那么在发送服务器响应之前，我的数据数组应该是180000长（300*150*4）。 当前端收到响应时，它调用

res.arrayBuffer（）

然后它创建了一个新的Uint8ClampedArray，但在这种情况下，我的长度不再是180000，而是543810。 正如Kaido所说，我可能想要切分这个数组，虽然我尝试过，但没有成功

我该怎么切呢？18万首？18万美元？还有别的办法吗？

const { imgData } = JSON.parse(req.body)

这与JSON.stringify相反，需要通过stringify发送数据，但在传输过程中没有将数据解析回原始对象

Do

---

这与JSON.stringify相反，需要通过stringify发送数据，但在传输过程中没有将数据解析回原始对象

JSON只处理很少的类型：字符串、数字、数组、对象、布尔值和null

没有可枚举属性的ImageData将得到JSON.stringified为

“{}”

，一个空对象

const img=新的图像数据（6,6）；
图像数据填充（0xFF）；
console.log（'JSON'，JSON.stringify（img））；//"{}"
const props=Object.getOwnPropertyDescriptors（img）；
console.log（'own properties'，props）；//{}

JSON只处理很少的类型：字符串、数字、数组、对象、布尔值和null

没有可枚举属性的ImageData将得到JSON.stringified为

“{}”

，一个空对象

const img=新的图像数据（6,6）；
图像数据填充（0xFF）；
console.log（'JSON'，JSON.stringify（img））；//"{}"
const props=Object.getOwnPropertyDescriptors（img）；
console.log（'own properties'，props）；//{}

您是否使用Postman测试了您的API？路由是否工作并接收正确的数据？不，不是与postman，而是直接与front，问题是接收数据，而不是我发送的确切数据（正如我在帖子中所说），您是否使用postman测试了API？路由是否正常工作并接收到正确的数据？不，不是与postman，而是直接与front，问题是这是接收到的数据，而不是我发送的确切数据（正如我在帖子中所说），谢谢你的回复，但我想我已经在这样做了，我的路由上方有bodyParser中间件：

app.use（bodyParser.json（{limit:'50mb'））

这也可以吗？EDIT:tested它在JSON中的位置1处得到了错误

意外的标记o，这意味着它已经被解析了..对，你应该在发送时检查
req.body.imgData
，因为你正在传递
JSON.Stringify（{imgData:payload}），而不是简单的
JSON.Stringify（payload）。ImgData是一个包含有效负载的主体内部的对象。最好取消对标题的注释<代码>控制台.log（）
发送前即可。您是否检查了路线上的控制台日志？您似乎在传输过程中丢失了数据。是的，我正在进行测试，这就是为什么它被评论的原因。是的，我知道，问题是我丢失了数据（我的高度/宽度键），我的数组（imageData.data）变成了一个键/对对象，它们都失去了成为对象的类型感谢您的响应，但我想我已经在做了，我的路径上方有bodyParser中间件：
app.use（bodyParser.json（{limit:'50mb'））
这也可以吗？EDIT:tested它在JSON中的位置1处得到了错误
意外的标记o，这意味着它已经被解析了..对，你应该在发送时检查
req.body.imgData
，因为你正在传递
JSON.Stringify（{imgData:payload}），而不是简单的
JSON.Stringify（payload）。ImgData是一个包含有效负载的主体内部的对象。最好取消对标题的注释<代码>控制台.log（）
发送前即可。您是否检查了路线上的控制台日志？您似乎在传输过程中丢失了数据。是的，我正在进行测试，这就是为什么它被评论的原因。是的，我知道，问题是我丢失了数据（我的高度/宽度键），我的数组（imageData.data）变成了一个键/对对象，它们都失去了成为对象的类型感谢您花时间解释我，在您的帮助下，我很快就可以让它工作了。只剩下一个问题，我会在编辑中解释。如果你有更多的时间给我，看一看谢谢你花时间给我解释，在你的帮助下，我很快就会成功的。只剩下一个问题，我会在编辑中解释。如果你有更多的时间给我，看一看，不是吗
router.post('/:type', (req, res) => {
  let form = new formidable.IncomingForm()
  form.parse(req, (err, fields, files) => {
    fs.readFile(files.data.path, (err, data) => {
      const imgProcessed = traitement[req.params.type](data)
      console.log(imgProcessed.length)
      return res.status(200).json([imgProcessed])
    })
  })
})

const { imgData } = JSON.parse(req.body)