如何在 express-fileupload 中上传带有标签或 alt 值等附加信息的图像文件？答案

【问题标题】：How to upload image file with additional information like label or alt value in express-fileupload?如何在 express-fileupload 中上传带有标签或 alt 值等附加信息的图像文件？
【发布时间】：2022-01-16 21:52:53
【问题描述】：

我正在尝试在文件对象中添加标签文本，但是当通过 express-fileupload 在 node.js 中上传时。它正在上传文件但标签丢失。

const [files, setFiles] = useState([]);

const imageLabelChanger = (index, e) => {
   const value = e.target.value;
    //insert label and value for specifix image by index

   files[index].file.label = value;
   setFiles(files);
 }; 
 const FD = new FormData();

 const createProduct = (e) => {
    e.preventDefault();

    for (let i in files) {
        FD.append("productImageArray", files[i].file);
    }
    dispatch(addProductImage(paramId, FD));
};

通过这段代码，我得到了文件对象

console.log(文件)

output: [
        {
            "id": 7,
            valid: true,
            "file": File{
            label: "oxygen blue",
            lastModified: 1642222607314,
            lastModifiedDate: Sat Jan 15 2022 10:26:47 GMT+0530 (India Standard Time) {},
            name: "galaxy-8.jpeg",
            size: 8433,
            type: "image/jpeg",
            
        },
        {
            "id": 8,
            valid: true,
            "file": File{
            lastModified: 1642222607314,
            lastModifiedDate: Sat Jan 15 2022 10: 26: 47 GMT+0530(India Standard Time) {},
            name: "galaxy-9.jpeg",
            size: 9458,
            type: "image/jpeg",
        }
    ]

文件上传后我得到文件对象但没有得到我使用formData发送的实际文件对象，标签键和它的值丢失

console.log(req.files.productImages)

    output: [
                {
                    lastModified: 1642222607314,
                    lastModifiedDate: Sat Jan 15 2022 10:26:47 GMT+0530 (India Standard Time) {},
                    name: "galaxy-8.jpeg",
                    size: 8433,
                    type: "image/jpeg",
                    data:
Binary('/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7...', 0)
                },
                {
                    lastModified: 1642222607314,
                    lastModifiedDate: Sat Jan 15 2022 10: 26: 47 GMT+0530(India Standard Time) {},
                    name: "galaxy-9.jpeg",
                    size: 9458,
                    type: "image/jpeg",
                    data:
Binary('/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7...', 0)
                }
            ]

请帮助我如何制作我认为这个问题与 req.files 相关的东西，它可能不需要任何额外的属性，所以如果有任何方法可以实现这一点。

提前谢谢

【问题讨论】：

标签： javascript node.js reactjs mongodb express-fileupload

【解决方案1】：

我不确定这是否适用于您的情况，但我通常会在发送文件时附加一个带有附加详细信息的“正文”对象。像这样的：

const [files, setFiles] = useState([]);

const imageLabelChanger = (index, e) => {
   const value = e.target.value;
    //insert label and value for specifix image by index

   files[index].file.label = value;
   setFiles(files);
 }; 
 const FD = new FormData();

 const createProduct = (e) => {
    e.preventDefault();

    for (let i in files) {
        FD.append("productImageArray", files[i].file);
        FD.append("productImageArrayLabels", files[i].file.label); // Add another property to the formData here
    }
    dispatch(addProductImage(paramId, FD));
};

这样你就会在服务器上有一个文件对象和一个正文对象：

文件：productImageArray
文件标签：productImageArrayLabels

【讨论】：

顺便说一下没用，谢谢解决
你是否使用 express/node 来处理服务器上的数据？如果是这样，您使用什么包来处理文件？穆尔特？
实际上我已经尝试过 express-fileupload 和 multer。两者都没有提供任何额外的财产。包返回 { name, md5, data, truncated, encoding, size } 但我想要标签或任何我可以用标签存储图像的地方
我想我现在明白了。您是一次更改一个标签，还是可以在任何给定时间将多个文件发送到服务器？
多个文件。您的解决方案也需要，但在后端我们需要根据他们的索引分配标签。实际上，我认为 multer 并没有提供这种方式，所以我们需要这样做。