使用JS中的formdata和fetchAPI将上传到表单中的图像发送到服务器

Question

我试图从单个表单中提取图像和文本数据。我尝试使用formdata.get（图像）来获取用户选择的图像，但它不起作用，因为我在服务器上收到了一个未定义的值。我想知道使用formdata或任何其他方法获取用户在表单中选择的图像的适当方法，谢谢。

形式

 <form id = "register" class = "edit-note" enctype = "multipart/form-data">
                <div>
                    <label>Heading:</label>
                    <input type = "text" name = "heading" placeholder = "<%= Note[0].heading %>" id = "heading">
                </div>
                <div>
                    <label>Small Text:</label>  
                    <input type = "text" name = "stext" placeholder = "<%= Note[0].smallText %>" id = "stext">
                </div>

                <div>
                    <label>Featured Image:</label>
                    <img src = "<%= Note[0].image %>" height = "110px" width = "132px">
                    <input type = "file" name = "image" id = "fimage">
                </div>
                <div>
                    <label>Background Image:</label>
                    <img src = "<%= Note[0].background %>" height = "110px" width = "132px">
                    <input type = "file" name = "bimage" id = "bimage">
                </div>
    
                <div>
                    <label>Content:</label> 
                    <textarea name = "content" placeholder = "<%= Note[0].content %>" id = "content"></textarea>
                </div>

                <input type = "submit" name = "register" value = "Save Changes">
            </form>

FetchAPI

const noteForm = document.querySelector('.edit-note');

noteForm.addEventListener('submit', function(e) {
    e.preventDefault();
    let url = "";

    const formData = new FormData(this);

    fetch( '/images', {
        method: 'POST',
        body: formData.get('image')
    }).then(response => {
        response.json();
    }).then(URL => {
        //console.log(URL);
        url = URL;

我排除了FetchAPI中与问题无关的部分。

Answer 1

如果您想使用XMLHttpRequest上传文件，那么您必须使用FormData，您正在这样做，但方式不对。

第一步：创建一个FormData实例

let formData = new FormData();

第二步：在其中添加数据

formData.append('file_to_upload', fileField.files[0]);  // Here fileField is the input file reference

第三步：通过XMLHttpRequest发送formData，在formData中添加文件名时，您将获得文件名，在上述情况下，文件名为-file\u to\u upload