SpringBoot文件上传

SpringBoot文件上传

需求一

• 实现普通文件上传功能
  • 配置yaml:相对路径

upload:
  path: ${user.dir}/src/main/resources/static/asserts/upload/

• 前端：

<form id="uploadForm" action="/upload" method="post" enctype="multipart/form-data">
				<label id="result">上传图片</label>
				<input type="file" name="file" id="imageFile" >
				<button  type="submit" class="btn btn-primary"onclick="uploadImage()" >上传图片</button>
			</form>

• js

 <script text="text/javascript"  src="http://code.jquery.com/jquery-2.2.4.js">
function uploadImage() {
			var formData = new FormData();
			formData.append("imageFile", $("#imageFile")[0].files[0]);
			var file=formData;
			$.ajax({
				url: "/upload",
				type: "POST",
				data: file,
				processData: false,
				contentType: false,
				success: function(response) {
					// alert(response.data)
					$("#newsPhoto").val(response.data)
					$("#result").text(response.msg);
					// return true;
				},
				error: function() {
					$("#result").text("上传失败");
				}
			});}
</script>

• 后端：

 @RestController
    public class ImageUploadController {

        // 从配置文件中获取上传文件的保存路径
        @Value("${upload.path}")
        private String uploadPath;

        @PostMapping("/upload")
        public Result uploadImage(@RequestParam("file") MultipartFile file) {
            System.out.println("file输出了输出流"+file.getOriginalFilename());
            // 检查上传文件是否为空
            if (file.isEmpty()) {
                return Result.error("文件上传不能为空");
            }

            try {
                // 获取上传文件的原始文件名
                String originalFilename = StringUtils.cleanPath(file.getOriginalFilename());

                // 生成新的文件名，以避免重复
                String newFilename = generateNewFilename(originalFilename);

                // 创建新的文件对象
                File destFile = new File(uploadPath + newFilename);
                System.out.println("文件路径"+destFile);
                // 保存上传文件到目标位置
                file.transferTo(destFile);

                // 执行其他操作，例如保存文件信息到数据库等

                return Result.ok("上传成功",destFile);
            } catch (IOException e) {
                e.printStackTrace();
                return Result.error("文件上传失败！");
            }
        }

        private String generateNewFilename(String originalFilename) {
            // 可以根据需要自定义新的文件名生成逻辑，例如添加时间戳或随机字符串
            // 这里简单地将原始文件名前加上时间戳
            long timestamp = System.currentTimeMillis();
            return timestamp + "_" + originalFilename;
        }

• 工具类Result

@Data
public class Result implements Serializable {
  private static final long serialVersionUID = -8617060364099013743L;
  //响应业务状态码 2000 表示成功
  private Integer code;
  //是否成功
  private Boolean flag;
  //响应信息
  private String message;
  //响应中的数据
  private Object data;

  //有参构造
  public Result(Integer code, String message, Object data) {
    this.code = code;
    this.message = message;
    this.data = data;
    this.flag = code == 2000;
  }

  public static Result ok() {
    return new Result(2000, "成功", null);
  }

  public static Result ok(String message) {
    return new Result(2000, message, null);
  }

  public static Result ok(Object data) {
    return new Result(2000, "成功", data);
  }

  public static Result ok(String message, Object data) {
    return new Result(2000, message, data);
  }

  public static Result error(String message) {

    return new Result(999, message, null);
  }

  public static Result build(int code, String message) {
    return new Result(code, message, null);
  }

  public String toString() {
    //把响应的Java对象，转换成JSON字符串
    return JSON.toJSONString(this);
  }
}

需求二

在我实际操作用到项目里面时，发现上传完表单直接跳转了页面

我需要AJAX异步交互，不要他跳转页面

• html

<div class="container">
//提交整体数据
			<form th:action="@{/snewspost}">
			<p><h1>撰写文稿</h1></p>
				<p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>

			<input type="hidden" name="writer" th:value="${session.loginUser}">
			<input type="hidden" name="emo" th:value="1">
				<input type="hidden" name="wlevel" th:value="${session.this}">
			<div class="input-group mb-3">
				<div class="input-group-prepend">
					<span class="input-group-text" id="basic-addon1">Title</span>
				</div>
			<input  type="text" class="form-control" placeholder="在此输入标题" aria-label="Username" aria-describedby="basic-addon1" name="title">
			</div>


			<label>输入正文</label>


			<div class="input-group">

				<textarea class="form-control" style="height: 300px" name="word"></textarea>
			</div>

				<input id="newsPhoto" type="text" style="display: none"  name="photo">

			<div class="form-group col-md-4">
				<label for="inputState">提交分区</label>
				<select id="inputState" class="form-control" name="type">
					<option selected value="A童I趣新闻">A童I趣新闻</option>
					<option value="赛事速递">赛事速递</option>
					<option value="通知公告">通知公告</option>
					<option value="电子校报">电子校报</option>
					<option value="媒体A童I趣">媒体A童I趣</option>
				</select>
			</div>

			<button type="submit" class="btn btn-primary" style="float: right">Primary</button>
			</form>
//上传图片表单
			<form id="uploadForm" action="/upload" method="post" enctype="multipart/form-data">
				<label id="result">上传图片</label>
				<input type="file" name="file" id="imageFile" >
				<button  type="submit" class="btn btn-primary" >上传图片</button>
			</form>
		</div>

	$(document).ready(function() {
			$('#uploadForm').submit(function(event) {
				event.preventDefault(); // 阻止表单默认的提交行为

				var formData = new FormData(this);
				var file=formData;
			$.ajax({
				url: "/upload",
				type: "POST",
				data: file,
				processData: false,
				contentType: false,
				success: function(response) {
					// alert(response.data)
                    //将响应回来的路径赋值给另外一个表单
					$("#newsPhoto").val(response.data)
					$("#result").text(response.msg);
					// return true;
				},
				error: function() {
					$("#result").text("上传失败");
				}
			});
		})});

其他报错

• 400

原因：参数名称类型没有对上；或者参数格式不正确

<form id="uploadForm" action="/upload" method="post" enctype="multipart/form-data"></form>

表单不能嵌套，并且只能有一个值method=“post” enctype=“multipart/form-data”

• 报错：Error:(3, 32) java: 程序包org.springframework.boot不存在

网上试了好多方法，我的是将自己Springboot版本号降低解决了