使用blob上传多个图像到服务器

Question

我目前正在开发一个网站，我需要上传多个图像文件。为了实现此目的，我使用 blob 将文件上传到服务器。当我上传单个文件时它工作正常，但当我尝试上传两个以上文件时遇到错误。

我已经这样定义了状态：

type BlobNull = {
    0: Blob | null
    1: Blob | null
    2: Blob | null
    3: Blob | null
}
const [blobs, setBlobs] = React.useState < BlobNull > ({
    0: null,
    1: null,
    2: null,
    3: null,
})

const [catalog, setCatalog] = React.useState({
    ProductName: "",
    cShopVisiblity: true,
    Delivery: true,
    ItemPrice: "",
    Quantitiy: "",
    Notes: "Notes"
})

我使用处理函数来提交：

const handleAdd = async () => {
    startLoading();
    try {
        if (Object.values(catalog).every(val => val.toString().trim() !== "")) {


            const formData = new FormData();
            Object.keys(catalog).forEach(key => formData.append(key, catalog[key]));
            Object.values(blobs).filter(val => val !== null).forEach((blob, id) => formData.append(`Img`, blob))

            const { data, isOK } = await catalogService.add(formData);
            if (isOK) {
                addToastMsg(`Details saved : ${data.ProductName} ${data.Quantitiy}`, "success");
                setCatalog({
                    ProductName: "",
                    cShopVisiblity: true,
                    Delivery: true,
                    ItemPrice: "",
                    Quantitiy: "",
                    Notes: "Notes"
                });

                setOpen(false);
            } else {
                throw new Error("Internal server error");
            }
        } else {
            addToastMsg("Please fill all the fields required.", "warning");
        }

    } catch (e) {
        console.error("error saving form", e);
        addToastMsg(
            "Unable to save details, please re validate entered values",
            "error"
        );
    }
    endLoading();
}

exports.add = async (req, res) => {
    try {
        // if (req.file) console.log("file");
        // if (req.files) console.log("files");
        // if (req.Img) console.log("Img");
        // if (req.data) console.log("data");
        if (req.files?.length > 1 && Array.isArray(req.files['Img'])) {
            multiUpload(req, res, async function (err) {
                if (err) {
                    return res.status(400).json({ message: 'Error uploading files' });
                }
                const files = req.files;
                const imageBuffers = files.map((file, id) => ({ [`Img${id > 0 ? id : ''}`]: Buffer.from(file.buffer) }))
                const catalog = await catalogsModel.create({ ...req.body, ...imageBuffers });
                res.status(201).json({
                    success: true,
                    data: catalog,
                });
            });
        } else {
            singleUpload(req, res, async function (err) {
                if (err) {
                    // handle the error here
                    return res.status(400).json({ message: 'Error uploading file' });
                }
                if (req.file) {
                    const imageBuffer = Buffer.from(req.file.buffer);
                    const catalog = await catalogsModel.create({ ...req.body, Img: imageBuffer });
                    res.status(201).json({
                        success: true,
                        data: catalog,
                    });
                } else {
                    const catalog = await catalogsModel.create(req.body);
                    res.status(201).json({
                        success: true,
                        data: catalog,
                    });
                }
                // fs.writeFile(`./uploads/${file.originalname}`, file.buffer, function (err) {
                //   if (err) {
                //     // handle the error here
                //     return res.status(500).json({ message: 'Error saving file' });
                //   }

                //   // return a success response
                //   return res.status(200).json({ message: 'File uploaded successfully' });
                // });
            });
        }


    } catch (error) {
        console.log("API error", error);
        if (!res.headersSent) {
            res.send(500).json({
                success: false,
                error: "Server error",
            });
        }
        return;
    }
};

在上面的代码中，“blob”是图像数据 blob 的状态。它已正确配置并且运行良好。

但是，在服务器端，当我检查是否上传了多个文件时，它返回所有未定义的。

正如您在代码中看到的，如果我取消注释并记录“req”变量的属性，它将输出 undefined。

可能是什么问题？

这里有趣的是上传单个文件效果很好。仅上传多个文件会导致问题。

Answer 1

我想我可以回答这个问题。 我一直在寻找有关 api 响应的错误。 问题出在 nuxt.config.js 中用户端点上的“propertyName”。 默认设置为“用户”。当我将其设置为“propertyName：false”时，一切都会按预期进行。 默认情况下，“propertyName”设置为“user”，它期望来自“/user”端点的响应具有名为“user”的包含用户数据的属性。但是，在您的情况下，响应似乎不遵循此结构，因此设置“propertyName：false”会绕过属性分配。

auth: {
    strategies: {
      local: {
        endpoints: {
          login: {url: '/login', method: 'post', propertyName: 'token' },
          user: {url: '/user', method: 'get', propertyName: false },
          logout: false,
        }
      }
    }
  },