实现异步上传图片【前后端分离】

（1）编写接收数据类

@Data
public class Result {
    private int errno;
    private String[] data;
}

1
2
3
4
5
6

（2）编写控制器，接收上传图片

@RequestMapping("/upload")
    @ResponseBody
    public Result upload(HttpServletRequest request, MultipartFile file) throws IOException {
        // 创建文件夹，存放上传文件
        // 1.设置上传文件夹的真实路径
        String realPath = ResourceUtils.getURL("classpath:").getPath() + "/static/upload";
        // 2.判断该文件夹是否存在，如果不存在，新建文件夹
        File dir = new File(realPath);
        if (!dir.exists()){
            dir.mkdirs();
        }
        // 拿到上传文件名
        String filename = file.getOriginalFilename();
        filename = UUID.randomUUID()+filename;
        // 创建空文件
        File newFile = new File(dir, filename);
        // 将上传的文件写到空文件中
        file.transferTo(newFile);

        // 构造返回结果
       Result Result = new Result();
        Result.setErrno(0);
        String[] data = {"/upload/"+filename};
        Result.setData(data);
        return Result;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

（3）在yml文件中配置允许传输文件的大小

# 上传文件
spring:
  servlet:
    multipart:
      max-file-size: 10MB # 最大单个文件
      max-request-size: 10MB # 一次请求最大上传
1
2
3
4
5
6

（4）编写前端页面

①引入jquery.form.js

②修改页面

 <div class="col-md-8 data" style="height: 110px">
       <form id="uploadPImage" enctype="multipart/form-data">
            <input type="file" name="file" id="pImageFile">
       form>
div>
<script>
	$(function (){
		$("#pImageFile").change(function (){
     		  // 异步提交表单
      		 $("#uploadPImage").ajaxSubmit({
           		 url:"/backstage/product/upload",
           		 type: "post",
           		 success:function (result){
            	// 上传成功后，图片回显到pImage上
            	$("#pImage").attr("src",result.data[0]);
           		 // 上传成功后，图片地址放入产品表单的隐藏域中
            	$("#hiddenPImage").val(result.data[0]);
          		 }
        	 })
   	    })
   })
script>
<div class="col-md-2 data" style="height: 110px">
      <img height="100" th:src="@{/backstage/img/no-img.png}" id="pImage">
div>

 <form th:action="@{/backstage/product/add}" method="post">
	 <input type="hidden" name="pImage" id="hiddenPImage">
form>	 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29