上傳多個單獨文件

後臺使用spring boot,前端想異步方式上傳多個文件?

後臺使用:

@PostMapping(value = "/fileUpload")
public ResponseEntity fileUpload(@RequestParam("files") MultipartFile[] file) {
    ...
}

前端針對不同情況而使用不同方式,主要使用表單異步提交方式,如下:

    若只是在單個文件域中選擇多個文件上傳,則加上屬性:multiple即可,這樣既可以選擇多個文件上傳,如下:

    HTML

<input id="file1" type="file" multiple />

    js代碼

submit() {
    let formData = new FormData();
    let files = document.getElementById("file1").files;
    if (files) {
        files .forEach(f => {
            formData.append("files", f);
        })
    }
    // 以formData爲參數發送請求,contentType需要設置爲"multipart/form-data"
    ...
}

    若使用多個文本域,想發到一起上傳,也好辦:

    HTML

<input id="file1" type="file"/>
<input id="file2" type="file"/>
<input id="file3" type="file"/>
<input id="file4" type="file"/>
...

    js代碼

submit() {
    let formData = new FormData();
    let files = document.querySelectorAll("input");
    if (files) {
        files.forEach(f => {
            if (f.files && 0 < f.files.length) {
                formData.append("files", f.files[0]);
            }
        })
    }
    // 以formData爲參數發送請求,contentType需要設置爲"multipart/form-data"
    ...
}

總結,實際上前端想要上傳多個文件,文件域的名稱一樣就行。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章