使用 formData 将数组发送到节点作为对象

Question

我正在执行更新，除了其他数据外，我还需要向 Node 发送一个数组，其中包含一个或多个图像的信息，但只有它们的路径和 ID，而不是图像本身。

我正在执行更新，除了其他数据外，我还需要向 Node 发送一个数组，其中包含要删除的一个或多个图像的信息，但我只传递了它的路径和 ID，而不是图像本身，因为图像在 Cloudinary 中。

我使用 formData 是因为在这些数据中我发送新图像以防需要新图像，但我收到了除了要删除的图像之外的所有数据，因为我没有接收数组，而是只接收 [Object Object] 并且我无法工作用它。 这是我的代码：

    const putProduct = async (productToUpdate, filesToDelete) => {

        console.log(filesToDelete) // Array

        const formData = new FormData()
        const imageArr = Array.from(productToUpdate.pictures)

        imageArr.forEach(image => {
          formData.append('pictures', image)
        })

        formData.append('filesToDelete', filesToDelete)
        formData.append('barCode', productToUpdate.barCode)

        try {
            const dataOnLs = localStorage.getItem('cmtjs')
            const config = {
                headers: {
                    "Content-Type": "multipart/form-data",
                    apiKey: dataOnLs
                }                
            } 

            const { data } = await axiosClient.put(`/products/${productToUpdate.id}`, formData, config )

我在 Node 中收到并通过控制台req.body.filesToDelete但它总是指示 [Object Object]

let updateProduct = async ( req, res = response ) => {


    const filesToDelete = req.body.filesToDelete;
    console.log(filesToDelete); // [object Object]
    return

Answer 1

FormData 要求对象是字符串。 以下是替代品：

前端
代替：

formData.append('filesToDelete', filesToDelete)

和：

formData.append('filesToDelete', JSON.stringify(filesToDelete))

后端
代替：

const filesToDelete = req.body.filesToDelete

和：

const filesToDelete = JSON.parse(req.body.filesToDelete)

Answer 2

您应该像对待productToUpdate.pictures一样对待filesToDelete数组。

如果您希望filesToDelete在req.body.filesToDelete中显示为数组，请使用此...

filesToDelete.forEach((f) => {
  formData.append("filesToDelete", f);
});

Multer 自动将重复字段作为数组处理。 您可以选择将[]添加到字段名称中，以便在代码中清晰...

formData.append("filesToDelete[]", f);

但结果是一样的。

---

在客户端，您可以删除内容类型标头。 您的浏览器会自动为您处理。