当前请求不是多部分请求

Question

我正在尝试将图像发送到我的服务器。我不断收到错误消息：当前请求不是多部分请求。当我在 Postman 中测试它时，它工作正常。

这是我的html表单：

function saveImageToProduct() {

    var formData = new FormData(document.querySelector("#newImagesForm"));

    var encData = new URLSearchParams(formData.entries());

    fetch("/uploadFile", { method: 'POST', body: encData })

        .then(response => Promise.all([response.status, response.json()]))

        .then(function([status, myJson]) {

            if (status == 200) {

                console.log("succeed!");

            } else {

                console.log("failed!");

            }

        })

        .catch(error => console.log(error.message));

    return false;

}

<form enctype="multipart/form-data" novalidate="novalidate" id="newImagesForm" method="post">

    <div>

        <p>Selecteer een afbeelding:</p>

        <input id="file" name="file" type="file"/>

    </div>

    <br>

    <div>

        <button id="button" onclick="return saveImageToProduct()" class="btn btn-lg btn-info btn-block">

            <span>Voeg aanbieding toe</span>

        </button>

    </div>

</form>

后端Java代码：

@PostMapping("/uploadFile")

public ProductImage uploadFile(@RequestParam("file") MultipartFile file) {

    String fileName = fileStorageService.storeFile(file);

    String fileDownloadUri = ServletUriComponentsBuilder.fromCurrentContextPath()

            .path("/uploads/")

            .path(fileName)

            .toUriString();

    return new ProductImage(fileName, fileDownloadUri,

            file.getContentType(), file.getSize());

}

当我尝试发送图像时，我在后端收到 500 错误：

2019-03-10 19:40:33.588 ERROR 5668 --- [io-9001-exec-10] o.a.c.c.C.[.[.[/].[dispatcherServlet]    : Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed; nested exception is org.springframework.web.multipart.MultipartException: Current request is not a multipart request] with root cause org.springframework.web.multipart.MultipartException: Current request is not a multipart request

当我在 Postman 中执行此操作时，它可以正常工作，如下图所示：

Answer 1

下面的代码应该可以完成这项工作：您基本上创建了一个新的 Form 对象并将文件数据附加到它。您可以通过添加更多“data.append”行来为其添加多个数据属性。&nbsp; &nbsp; function uploadPicture() {&nbsp; &nbsp; &nbsp; &nbsp; var input = document.querySelector('input[type="file"]')&nbsp; &nbsp; &nbsp; &nbsp; console.log(productID);&nbsp; &nbsp; &nbsp; &nbsp; var data = new FormData()&nbsp; &nbsp; &nbsp; &nbsp; data.append('file', input.files[0])&nbsp; &nbsp; &nbsp; &nbsp; fetch('/uploadFile/', {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; method: 'POST',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; body: data&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; .then(response => Promise.all([response.status, response.json()]))&nbsp; &nbsp; &nbsp; &nbsp; .then(function([status, myJson]) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (status == 200) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log("succeed!");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log("failed!");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; .catch(error => console.log(error.message));&nbsp; &nbsp; }HTML：&nbsp; &nbsp; &nbsp; &nbsp; <input type="file" name="file" id="fileinput">&nbsp; &nbsp; &nbsp; &nbsp; <input type="submit" value="Upload" onclick="uploadPicture()">

Answer 2

您可以尝试修改它-var&nbsp;formData&nbsp;=&nbsp;new&nbsp;FormData(document.querySelector("#newImagesForm")[0]);