springboot MultipartFile 多图片上传

实现一个简单的多张图片上传。使用MultipartFile。关于MultipartFile的配置# 是否支持多文件上传spring.servlet.multipart.enabled=true# 文件写入磁盘的阈值spring.servlet.multipart.file-size-threshold=0B# 上传文件的保存地址spring.servlet.multipart.location=#

money man

3068人浏览 · 2022-04-13 17:17:35

money man · 2022-04-13 17:17:35 发布

实现一个简单的多张图片上传。使用MultipartFile。

关于MultipartFile的配置

# 是否支持多文件上传
spring.servlet.multipart.enabled=true
# 文件写入磁盘的阈值
spring.servlet.multipart.file-size-threshold=0B
# 上传文件的保存地址
spring.servlet.multipart.location=
# 上传文件的最大值
spring.servlet.multipart.max-file-size=1MB
# 请求的最大值
spring.servlet.multipart.max-request-size=10MB
# 是否在文件或参数访问时延迟解析多部分请求
spring.servlet.multipart.resolve-lazily=false

Spring Boot应用上传文件时报错 - 云+社区 - 腾讯云 (tencent.com)

controller

    @PostMapping("/pic")
    public ResponseEntity<String> pic(MultipartFile[] pictures, HttpSession session) throws IOException {
        String url = "/files";
        String path = System.getProperty("user.dir")+url;

        File realPath = new File(path);
        if (!realPath.exists()){
            realPath.mkdirs();
        }

        long count = Arrays.asList(pictures).stream()
                .map(MultipartFile::getOriginalFilename)
                .filter(String::isEmpty).count();
        if(count != pictures.length){
            for (MultipartFile picture : pictures) {
                String originalFilename = picture.getOriginalFilename();
                //todo 这里可以改变文件名
                //......

                //写文件
                picture.transferTo(new File(realPath +"/"+ originalFilename));
            }
            return new ResponseEntity<String>("上传成功",HttpStatus.OK);
        }
        return new ResponseEntity<String>("上传失败",HttpStatus.INTERNAL_SERVER_ERROR);
    }

html

<form class="avatar-upload" action="#" id="fileForm">
    <div class="avatar-edit">
         <input type="file" name="pictures" id="multipleFiles" multiple accept="image/png, image/jpg, image/jpeg">
         <label for="multipleFiles"></label>
    </div>
    <div class="avatar-preview">
         <div id="files">
                            
         </div>
         <button type="button" class="btn btn-primary btn-sm" onclick="UploadFiles()">提交</button>
     </div>
</form>

function readURLFiles(file) {
    if(file){
        let reader = new FileReader();
        reader.filename = file.name;

        //异步执行
        reader.onload = function (ev) {
            let html = "<image src='"+ev.target.result+"'style='border-radius: 50%' width='128' height='128'>"+
            "<span>"+ev.target.filename+"</span>";
            $("#files").append(html);
            console.log(ev);
        }

        console.log(file);
        reader.readAsDataURL(file);
    }
}



$(function () {
        //多文件上传
        $('#multipleFiles').change(function () {
            console.log("多文件input变化了");
            //清空显示栏中的图片
            $('#files').html("");
            if(this.files){
                for(let i=0,len=this.files.length;i<len;i++){
                    readURLFiles(this.files[i]);
                }
            }
        });
        
})

function UploadFiles(){
    //获取form表单中所有属性  key为name值
    var formData = new FormData($("#fileForm")[0]);//FormData序列化表单数据
    $.ajax({
        url: '/pic',
        type: 'POST',
        dataType:"text",
        data: formData,
        processData: false,
        contentType: false,
        success: function(data) {
            window.confirm(data);
        },
        error: function(res) {
            console.log(res);
            alert("失败");
        }
    });
}