页面仅上传一张图片

Question

我正在创建一个接受POST和GET请求的基本服务器。 我希望能够将图像上传到目录，但是将日期（位置，名称，描述，ID等）上传到JSON文件。 当我有一个GET请求时，它会收集路径的最后一部分（即/ upload？image = img1＆image = img2），但是在POST请求的情况下，它只会收集上载的路径（即/ admin / gallery）。 这样一来，当我解析标题时，它仅会捕获最后提交的图像。

因为我要发布到/upload所以我有一个处理程序，可以解析请求并确定请求的媒体类型并将其内容写入文件。 其他所有东西都可以正常工作，但是我认为它看到有多个名称为“ image”的对象，并丢弃了除最后一个对象之外的所有对象 。

HTML：

<form method="POST" id="galleryForm" action="/upload" enctype="multipart/form-data">
    <fieldset>
        <label for="gallery">Picture File(s):</label> 
        <input name="image" type="file" multiple />         
        <input type="submit" value="Add Pictures" />
    </fieldset>
    <fieldset>
        <input type="text" name="title" value="Title..." required  />
    </fieldset>
</form>

JavaScript：

if (req.body.image) {
    fs.writeFile(`public/media/images/${req.body.image.filename}`, req.body.image.data, function (err) {
        console.log(req.body.image);
        dataStore.create('gallery', {
            title: req.body.title,
            type: "image",
            description: req.body.description,
            images: ["public/media/images/" + req.body.image.filename]
        }, function (err, id) {
            res.statusCode = 303;
            res.statusMessage = "See Other";
            res.setHeader("Location", "admin/gallery.nsp");
            res.end();
        });
    });
}

我的JSON文件如下所示：

"6ed143c4-8493-448f-b3c3-d4e04cc5baaa":{
    "title":"Title...",
    "type":"image",
    "description":"Enter a description...",
    "images":[
        "public/media/images/img1.jpeg"
    ],
    "id":"6ed143c4-8493-448f-b3c3-d4e04cc5baaa"
}

但是应该最终看起来像这样：

"6ed143c4-8493-448f-b3c3-d4e04cc5baaa":{
    "title":"Title...",
    "type":"image",
    "description":"Enter a description...",
    "images":[
        "public/media/images/img1.jpeg",
        "public/media/images/img2.jpeg"
    ],
    "id":"6ed143c4-8493-448f-b3c3-d4e04cc5baaa"
}

Answer 1

您需要在输入文件中添加ID。 请参阅下面的代码。

html范例

<input name="image" id="my-input" type="file" multiple />  

对于jQuery舒适的人来说，这同样容易

// assuming there is a file input with the ID `my-input`...
var files = $("#my-input")[0].files;

for (var i = 0; i < files.length; i++)
{
 alert(files[i].name);
}

对于javascript示例

// assuming there is a file input with the ID `my-input`...
var files = document.getElementById("my-input").files;

for (var i = 0; i < files.length; i++)
{
 alert(files[i].name);
}