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

Question

我正在尝试从单个表单中提取图像和文本数据。我尝试使用 formdata.get('image') 来获取用户选择的图像，但它不起作用，因为我在我的服务器上收到未定义的值。我想知道获得由 a 选择的图像的适当方法用户在表单中使用 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

步骤 III： 将 formData 发送到 XMLHttpRequest 上，您将获得带有您提供的名称的文件，同时将其附加到 formData，在上面的例子中是 - file_to_upload

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

Sending an image uploaded in a form to a server using formdata and fetchAPI in JS

javascript

forms

fetch

image-upload