SpringBoot+ajax+formData实现图片上传和回显

前端Html

<h2>图片上传</h2>
<img src="" id="preview_photo" width="200px" height="200px">
<a href="javascript:void(0)" id="photo_upload" onclick="upLoadPhoto()">select photo</a>
<input type="file" id="upload" style="display: none" onchange="upload()">

注意 img标签的src是未赋值的

js代码

<script>
    function upLoadPhoto(){
        $("#upload").click();
    }
    function upload(){
        var form = new FormData();
        form.append("file", $("#upload")[0].files[0]);
        $.ajax({
            type :"POST",
            url:"http://localhost:8888/picture/upload.json",
            dataType:"json",
            data:form,
            processData:false,
            contentType:false,
            success:function(data){
                console.info(data.result.path);
                $("#preview_photo").attr("src",data.result.path);
            },
            error:function (data) {
                alert("error");
            }
        })
    }
</script>

这里推荐了解一下ajax的各个参数用处：

https://www.cnblogs.com/wuchenfei/p/9820958.html（借用大佬的博客）

后端这里没有使用service，直接在controller中进行的fileName拼装和返回

package com.zdj.controller;

import com.zdj.utils.R;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;

@RestController
@RequestMapping("/picture")
public class PictureController {
    //图片的物理存储路径
    private static final String filePath = "D:/aaaaa/";
    //设置的tomcat静态虚拟路径
    private static final String vFilePath = "http://localhost:8888/pic/";
    @RequestMapping("/upload")
    public R upLoad(@RequestParam("file") MultipartFile file[]){
        //获取图片的名字
        String fileName = file[0].getOriginalFilename();
        //获取文件后缀名
        String suffix = getSuffix(fileName);
        //判断后缀名
        if(!suffix.equals("jpg") && !suffix.equals("png")){
            System.out.println("suffix error");
            return R.ok("0");
        }
        //返回map来获取图片的虚拟路径
        Map<String, String> result = new HashMap<>();
        //date文件夹，方便管理
        String dateFile = new SimpleDateFormat("yyyyMMdd").format(new Date());
        String newfileName = filePath + dateFile;
        File newFile = new File(newfileName);
        //判断文件夹是否存在，不存在则创建
        if(!newFile.exists()){
            newFile.mkdirs();
        }
        //为文件添加uuid防止名字重复
        fileName = UUID.randomUUID().toString().replace("-","") + fileName;
        String newFilePath = newfileName + "/" + fileName;
        result.put("path",vFilePath + dateFile + "/" + fileName);
        try {
            file[0].transferTo(new File(newFilePath));
        } catch (IllegalStateException|IOException e) {
            e.printStackTrace();
        }
        return R.ok(result);
    }
    //封装获取后缀名方法
    public static String getSuffix(String fileName){
        int lastIndexOf = fileName.lastIndexOf(".");
        String suffix = fileName.substring(lastIndexOf + 1);
        return suffix;
    }
}

 当我写到这里的时候我发现我卡住了，原因是回显的时候无法直接从D盘中获取图片的路径。

所以我使用了tomcat的虚拟路径，在SpringBoot中添加config类

package com.zdj.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/pic/**").addResourceLocations("file:D:/aaaaa/");
    }

}

同时这里的“D：/aaaaa/”直接被替换成了“http：//localhost:8888/pic/”

前端获取的虚拟路径就可以直接赋给img标签的src来进行图片的回显

 问题

1.@RequestParam("file")的使用

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

对于上述的图片数据库的补充：

添加文件大小的限制：1.前端限制，将这个问题交给用户来解决 2. 后端限制，防止接口的恶意调用

主要针对后端的限制，方法体增加

@RestController
@RequestMapping("/picture")
public class PictureController {
    //图片的物理存储路径
    private static final String filePath = "D:/aaaaa/";
    //设置的tomcat静态虚拟路径
    private static final String vFilePath = "http://localhost:8888/pic/";
    @RequestMapping("/upload")
    public R upLoad(@RequestParam("file") MultipartFile file){
        //对图片大小进行限制（10M）
        if(!checkFileSize(file.getSize(), 10, "M")){
            return R.ok("error");
        }
        //获取图片的名字
        String fileName = file.getOriginalFilename();
        //获取文件后缀名
        String suffix = getSuffix(fileName);
        //判断后缀名
        if(!suffix.equals("jpg") && !suffix.equals("png")){
            System.out.println("suffix error");
            return R.ok("0");
        }
        //返回map来获取图片的虚拟路径
        Map<String, String> result = new HashMap<>();
        //date文件夹，方便管理
        String dateFile = new SimpleDateFormat("yyyyMMdd").format(new Date());
        String newfileName = filePath + dateFile;
        File newFile = new File(newfileName);
        //判断文件夹是否存在，不存在则创建
        if(!newFile.exists()){
            newFile.mkdirs();
        }
        //为文件添加uuid防止名字重复
        fileName = UUID.randomUUID().toString().replace("-","") + fileName;
        String newFilePath = newfileName + "/" + fileName;
        result.put("path",vFilePath + dateFile + "/" + fileName);
        try {
            file.transferTo(new File(newFilePath));
        } catch (IllegalStateException|IOException e) {
            e.printStackTrace();
        }
        return R.ok(result);
    }
    //封装获取后缀名方法
    public static String getSuffix(String fileName){
        int lastIndexOf = fileName.lastIndexOf(".");
        String suffix = fileName.substring(lastIndexOf + 1);
        return suffix;
    }

    /**
     *封装判断文件大小
     * @param len 文件长度默认单位字节
     * @param size 额定长度
     * @param unit 额定单位
     * @return
     */
    public static boolean checkFileSize(Long len, int size,  String unit){
        double fileSize = 0;
        if ("B".equals(unit.toUpperCase())) {
            fileSize = (double) len;
        } else if ("K".equals(unit.toUpperCase())) {
            fileSize = (double) len / 1024;
        } else if ("M".equals(unit.toUpperCase())) {
            fileSize = (double) len / 1048576;
        } else if ("G".equals(unit.toUpperCase())) {
            fileSize = (double) len / 1073741824;
        }
        if (fileSize > size) {
            return false;
        }
        return true;
    }
}