快捷導(dǎo)航

AJAX實現(xiàn)文件上傳功能報錯Current request is not a multipart request詳解

更新時間：2022年07月26日 09:08:15 作者：清風(fēng)亦思雨

這篇文章主要介紹了AJAX文件上傳功能實現(xiàn)中出現(xiàn)報錯Current request is not a multipart request的問題，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

想做一個文件上傳，spring boot配合Ajax來進行。卻報錯：Current request is not a multipart request

這是錯誤截圖：

當(dāng)時發(fā)生這種錯誤，我是很震驚的，我以為找了很多辦法來解決。

有以下辦法，當(dāng)然這些并未解決我的問題，但是部分有用，就先列舉出來：

1.在頁面頭部加入信息：

<meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />

此方法未解決問題！

2.在form表單加入屬性：enctype

<form method="post" enctype="multipart/form-data">
    <input type="file" name="file" />
</form>

此方法未解決問題！

3.后端：@RequestParam MultipartFile file 改為 @RequestPart MultipartFile file

此方法未解決問題！

還有個別方法。。。都不行

下面是解決方法，我之前的ajax代碼：

$('#upload-ok').click(function () {
        var form = document.getElementById("upload-form");
        var file = new FormData(form);
        $.ajax({
            url: "/addFile",
            type: "POST",
            processData:false,
            contentType:false,
            data:{
                "file":file
            },
            success: function (date) {
                xxxxxx
            },
            error: function (date) {
                xxxxxx
            }
        })
    })

正確代碼：

$('#upload-ok').click(function () {
        var form = document.getElementById("upload-form");
        var file = new FormData(form);
        $.ajax({
            url: "/addFile",
            type: "POST",
            processData:false,
            contentType:false,
            //重要部分，data的傳的是整個表單，不用大括號包裹；不用自定義變量名
            data:file,
            success: function (date) {
                xxxxxx
            },
            error: function (date) {
                xxxxxx
            }
        })
    })

就這樣，解決?。?！

到此這篇關(guān)于AJAX實現(xiàn)文件上傳功能報錯Current request is not a multipart request詳解的文章就介紹到這了,更多相關(guān)AJAX文件上傳內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: