Error: Unexpected field. using uploadMultiple from dropzone.js

Question

我想要一种方法，让用户可以选择要发送的图片并进行评论。

所以我使用 dropzone.js 。在一个请求中发送多张图片似乎有问题。我以为 req.files 会包含一个文件数组，但那并没有发生。现在我看到了一个问题，因为 dropzone 添加了 [] 和名称参数里面的索引。

将图像添加到 dropzone 时，我在请求负载中看到类似这样的内容：

------WebKitFormBoundaryJOpGX6kWaoknKhIN
Content-Disposition: form-data; name="images[0]"; filename="data.png"
Content-Type: image/png


------WebKitFormBoundaryJOpGX6kWaoknKhIN
Content-Disposition: form-data; name="images[1]"; filename="loginButton.png"
Content-Type: image/png


------WebKitFormBoundaryJOpGX6kWaoknKhIN--

我觉得 [0] 和 [1] 给我带来了问题

服务器：

app.post("/files" , upload.array("images"), (req, res) =>{
    console.log("hit here")
    console.log("req.file :", req.file)
    // console.log(req.body)
    console.log(req.files)
    res.send("ok")
})

简单的multer：我之前有过更复杂的

var upload = multer({ dest: "./uploads" })

前端：

<script src = "/dropzone.js"></script>
<script>
    $(function(){
        Dropzone.autoDiscover = false;
        var myDropZone = new Dropzone(".dropzone", {
            url : "/files",
            // uploadMultiple : true,

            autoProcessQueue : false,
             parallelUploads: 5,
            paramName: "images",
            uploadMultiple: true,
            init : function(){
                this.on("success", function(){
                    // alert("success")
                })
                this.on("sendingmultiple", function(){
                    console.log("SENDING MULTIPLE");
                })
                this.on("errormultiple", function(files, response){
                    console.log("ERROR");
                    console.log(response);
                    console.log(files);
                })
            } 
        })
            $("#skip, #login").on("click", function(e){
                myDropZone.processQueue();
            })
    })

</script>
<div class = "dropzone"></div>
   <div id = "skip"> skip </div>
   <div id = "login">login</div>

当我摆脱 uploadMultiple: true, 时，我在 FS 中获得了图像，但看起来像发出了多个 post 请求，没有包含多个图像的 req.files 数组。我以为会有

Answer 1

您应该能够通过为 paramName 而不是字符串指定函数来强制使用名称：

paramName: function() { return 'images'; },

这将阻止将任何后缀添加到表单字段。

Error: Unexpected field. using uploadMultiple from dropzone.js

Error: Unexpected field. using uploadMultiple from dropzone.js

javascript

node.js

express

dropzone.js

multer