SpringBoot使用StandardServletMultipartResolver實現單文件、多文件上傳(表單上傳,ajax上傳,fileupload)

從Spring3.1開始,Spring提供了兩個MultipartResolver的實現用於處理multipart請求。

Servlet3之前它只有一個基於commons-fileupload的實現CommonsMultipartResolver文件上傳,在使用時,必須要引入相應的jar包;但在Servlet3之後Spring提供了基於Servlet3的文件上傳StandardServletMultipartResolver,這種上傳方式不需要引用其他jar包,但是必須使用支持Servlet3.0的容器纔可以。

TomCat7.0.x之後Servlet都在3.0以上,具體比較可查看這裏
SpringBoot中默認使用第二種StandardServletMultipartResolver方式,本文案例基於這種方式演示:

1. 單文件上傳(表單方式)

1.1創建上傳表單

注意:

  1. 上傳文件method必須是post
  2. enctype爲multipart/form-data
<form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit" value="上傳">
</form>
1.2 後臺上傳業務處理
@RestController
public class FileUpload {

    @PostMapping("/upload")
    public String upload(MultipartFile file, HttpServletRequest req) {
    
        if (file != null) {
            //用於後面文件夾根據日期存放
            SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/dd/");

            //生成日期格式字符串
            String format = sdf.format(new Date());
            String pathDate = req.getServletContext().getRealPath("")+format;
            //判斷文件夾是否存在,不存在則創建
            File filePath = new File(pathDate);
            if (!filePath.exists()) {
                filePath.mkdirs();
            }

            //上傳的文件名
            String oldName = file.getOriginalFilename();

            //防止文件名重複,在這裏做一些處理,生成新的文件名 uuid+oldName文件後綴
            String newName = UUID.randomUUID().toString() + oldName.substring(oldName.lastIndexOf("."));

            try {
                //文件上傳,成功後返回文件路徑
                file.transferTo(new File(filePath, newName));
                return req.getScheme() + "://" + req.getServerName() + ":" + req.getServerPort() + format + newName;
            } catch (IOException e) {
                e.printStackTrace();
            }

        }
        return "error";
    }
}

2. ajax方式單文件上傳

只需將前端改爲ajax方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上傳</title>
    <script src="jquery-1.12.4.js"></script>
</head>
<body>
    <input type="file" id="file">
    <input type="button" onclick="upload()" value="上傳">
    <div id="result"></div>
</body>
<script>
    function upload() {

        var sourceFile = $("#file")[0].files[0];

        var formData = new FormData();
        formData.append("file",sourceFile);

        $.ajax({
            type:'post',
            url:'/upload',
            data:formData,
            processData: false, //不處理數據
            contentType:false,  //不設置類型
            success:function (msg) {
                $("#result").html(msg);
            }
        })
    }
</script>
</html>

3. 多文件上傳

1. 在input類型爲file標籤內添加 multiple即可實現多文件選中上傳
2. 也可以編寫多個input文件上傳,後臺數據接收多寫幾個MultipartFile
<form action="/uploads" method="post" enctype="multipart/form-data">
        <!-- 在input類型爲file標籤內添加 multiple即可實現多文件選中上傳-->
        <!-- 也可以編寫多個input文件上傳,後臺數據接收多寫幾個MultipartFile -->
        <input type="file" name="files" multiple>
        <input type="submit" value="上傳">
    </form>

後端處理:

@PostMapping("/uploads")
//使用MultipartFile[]接收多個文件
public String uploads(MultipartFile[] files, HttpServletRequest req) {
    if (files != null&&files.length>0) {

        //用於後面文件夾根據日期存放
        SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/dd/");

        //生成日期格式字符串
        String format = sdf.format(new Date());
        String pathDate = req.getServletContext().getRealPath("")+format;
        //判斷文件夾是否存在,不存在則創建
        File filePath = new File(pathDate);
        if (!filePath.exists()) {
            filePath.mkdirs();
        }

        for (MultipartFile file : files) {
            //上傳的文件名
            String oldName = file.getOriginalFilename();

            //防止文件名重複,在這裏做一些處理,生成新的文件名 uuid+oldName文件後綴
            String newName = UUID.randomUUID().toString() + oldName.substring(oldName.lastIndexOf("."));

            try {
                //文件上傳,成功後返回文件路徑
                file.transferTo(new File(filePath, newName));
                System.out.println(req.getScheme() + "://" + req.getServerName() + ":" + req.getServerPort() + format + newName);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        return "success";
    }
    return "error";
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章