上传多个单独文件

后台使用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"
    ...
}

总结,实际上前端想要上传多个文件,文件域的名称一样就行。

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值