springboot(11)- 整合web开发(3)- 文件上传

1 文件上传

springboot(11)- 整合web开发(3)- 文件上传_第1张图片
springboot(11)- 整合web开发(3)- 文件上传_第2张图片

1.1 案例

  • 页面
    springboot(11)- 整合web开发(3)- 文件上传_第3张图片

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传title>
head>
<body>
<form action="/myupload" method="post" enctype="multipart/form-data">
    <input type="file" name="file"><br>
    <input type="submit" value="提交">
form>

body>
html>
  • Controller
package com.tzb.controller;

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.SimpleTimeZone;
import java.util.UUID;

@RestController
public class FileUploadController {

    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");

    @PostMapping("/myupload")
    public String upload(MultipartFile file, HttpServletRequest req) {
        String format = sdf.format(new Date());
        String realPath = req.getServletContext().getRealPath("/img") + format;
        File folder = new File(realPath);
        if (!folder.exists()) {
            folder.mkdirs();
        }

        String oldName = file.getOriginalFilename();
        String newName = UUID.randomUUID().toString() + oldName.substring(oldName.lastIndexOf("."));
        try {
            file.transferTo(new File(folder, newName));
            String url = req.getScheme() + "://" + req.getServerName() + ":" + req.getServerPort() + "/img" + format + newName;
            return url;
        } catch (IOException e) {
            e.printStackTrace();
        }

        return "error";
    }
}

springboot(11)- 整合web开发(3)- 文件上传_第4张图片
springboot(11)- 整合web开发(3)- 文件上传_第5张图片

1.2 文件上传参数

springboot(11)- 整合web开发(3)- 文件上传_第6张图片

2 Ajax 文件上传

springboot(11)- 整合web开发(3)- 文件上传_第7张图片


<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="jquery-3.5.1.js">script>
    <title>文件上传title>
head>

<body>

<div id="result">div>
<input type="file" id="file">br>
<input type="button" value="上传" onclick="uploadFile()">

<script>
    function uploadFile() {
        var file = $("#file")[0].files[0];
        var formData = new FormData();
        formData.append("file", file);
        $.ajax({
            type: 'post',
            url: '/myupload',
            processData: false,
            contentType: false,
            data : formData,
            success: function (msg) {
                $("#result").html(msg);
            }
        })
    }
script>

body>
html>

springboot(11)- 整合web开发(3)- 文件上传_第8张图片

3 多文件上传


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多文件上传title>
head>
<body>
<form action="/uploads" method="post" enctype="multipart/form-data">
    <input type="file" name="files" multiple><br>
    <input type="submit" value="提交">
form>

body>
html>
@RestController
public class FileUploadController {

    SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/dd/");

    @PostMapping("/uploads")
    public String upload(MultipartFile[] files, HttpServletRequest req) {
        String format = sdf.format(new Date());
        String realPath = req.getServletContext().getRealPath("/img") + format;
        File folder = new File(realPath);
        if (!folder.exists()) {
            folder.mkdirs();
        }

        for (MultipartFile file : files) {
            String oldName = file.getOriginalFilename();
            String newName = UUID.randomUUID().toString() + oldName.substring(oldName.lastIndexOf("."));

            try {
                file.transferTo(new File(folder, newName));
                String url = req.getScheme() + "://" + req.getServerName() + ":" + req.getServerPort() + "/img" + format + newName;
                System.out.println(url);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }

        return "success";
    }
}

springboot(11)- 整合web开发(3)- 文件上传_第9张图片
springboot(11)- 整合web开发(3)- 文件上传_第10张图片
springboot(11)- 整合web开发(3)- 文件上传_第11张图片

你可能感兴趣的:(#,13-2,Spring,Boot,springboot,文件上传)