頁面僅上傳一張圖片

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);
}