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

Question

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

我正在执行更新，除了其他数据外，我还需要向节点发送一个数组，其中包含要删除的一个或多个图像的信息，但我只传递它的路径和 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);

但结果是一样的

在 client-side 上，您可以删除 content-type header。您的浏览器将为您handle this automatically。

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

Sending array to node is taken as object using formData

javascript

express

multer

axios