jquery formdata 在 express req.files 中返回 null

Posted 2023-05-09

【中文标题】jquery formdata 在 express req.files 中返回 null

【英文标题】：jquery formdata returns null in express req.files

【发布时间】：2021-10-03 19:03:34

【问题描述】：

我在客户端使用 Bootstrap/jquery。在服务器端，我使用 node.js 并表达 形式如下：

<form id="signupform" action="">
            <h2>Sign Up</h2>
            <p>Please fill in this form to create an account!</p>
            <hr>
            <div class="form-group">
                <input type="text" class="form-control" id="username" placeholder="Username" required="required">
            </div>
            <div class="form-group">
                <input type="email" class="form-control" id="email" placeholder="Email" required="required">
            </div>
            <div class="form-group">
                <input type="number" class="form-control" id="contact" placeholder="Contact" required="required">
            </div>
            <div class="form-group">
                <input type="password" class="form-control" id="password" placeholder="Password" required="required">
            </div>
            <div class="custom-file">
                <label class="custom-file-label" for="cover">Profile Picture</label>
                <input type="file" class="custom-file-input" id="cover">
                
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-primary btn-lg" id="sign-up">Sign Up</button>
            </div>
        </form>

我的jquery如下：

$(document).ready(function()
    $("#sign-up").click(function(event)
        event.preventDefault();
        var formData = new FormData();
        formData.append("username",$("#username").val())
        formData.append("email",$("#email").val())
        formData.append("contact",$("#contact").val())
        formData.append("password",$("#password").val())
        formData.append("cover",$("#cover")[0].files)
        $.ajax(
            url: "http://localhost:3000/users/",
            type: 'POST',
            data: formData,
            success: function (data) 
                alert(data)
            ,
            cache: false,
            contentType: false,
            processData: false
        );
    );
);

在服务器端，当我查看传入请求时，我看到：

 body: 
    username: 'Sree',
    email: '[e-mail]',
    contact: '1',
    password: '1',
    cover: '[object FileList]'
  ,

在服务器端，我使用的是 express-fileupload，但图像是在正文而不是 req.files 中发送的。如何将formData的文件发送到req.files而不是body？

【问题讨论】：

查看此链接 - makitweb.com/how-to-upload-image-file-using-ajax-and-jquery。您必须在表单中使用 enctype="multipart/form-data" 并检查给定链接中的 jquery 代码。

对formData.append("cover",$("#signupform")[4])中的[4]有什么期待？我建议formData.append("cover",$("#cover")[0].files) 其中[0] 是获取jQuery 对象内的DOM 元素，.files 是fileList。

您可以这样做var formData = new FormData(document.getElementById('signupform')); 而不是手动获取每个输入。从输入中删除 id 并改用 name。

【参考方案1】：

您应该将 File 对象传递给 append()，要访问文件对象，请使用 prop 方法访问 FileList 并获取第一个索引处的项目

formData.append("cover", $("#cover").prop('files')[0])

【讨论】：

我认为元素应该是 $('#cover") 但它有效