SpringBoot项目中前后端对图片的上传与接收操作

SpringBoot项目中前后端对图片的上传与接收操作

一、问题介绍

在一个在线图片分享系统中，前端使用JS+jQuery，后端使用Maven管理项目，采用分层次目录结构（Controller、Service、Mapper等）的一个Java语言编写的SSM（Spring+SpringBoot+Mybatis）项目中，需要实现一个前端标签上传图片，后端Controller层接收并处理图片。

二、前端上传图片方案

1.上传

上传图片的方式有很多，可以采用base64、blob等类型处理，而本文由于前端上传图片采用的是原生JS标签input的file类型：

<inputtype="file">

这个标签选择文件后，图片的路径会显示在这个标签中，但直接使用这个标签显然是不可以获取到图片的（你只是访问本地路径可以看得见图片，但网页它不认识这个路径所意味着的图片文件）。

2.前端网页显示此上传的图片

（1）HTML代码：

<inputtype="file"id="uploadimage"accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"><imgid="showimage"style="width: auto;height: 80%;"src=""alt="请上传图片">

属性解释：
<input>标签：
id：ID属性值，用于JS定位该标签；
type：设置为file，提供一个可以上传文件的按钮；
accept：顾名思义，是限制接受的文件类型的，规定这个属性值可限定文件类型为图片，如.jpg、.png（高清）、.gif（动图）、.jpeg、.svg（不推荐）；
标签：
id：同上；
style：样式设定；
src：路径；
alt：加载图片失败或src为空时的默认文本。

（2）JS代码：

 document.getElementById("uploadimage").onchange=function(){//当input标签上传了一个图片时var file =this.files;//将当前图片文件赋值给file变量var reader =newFileReader();//创建一个新FileReader类
     reader.readAsDataURL(file[0]);//将图片文件传给该FileReder
     reader.onload=function()//加载{var image = document.getElementById("showimage");
         image.src = reader.result;};}

3.前端上传该图片文件

使用JS代码处理该文件，采用FormData类型将该图片以二进制流的形式发给后端：
JS代码：
FormData类的使用：

var formData =newFormData();
formData.set("file", document.getElementById('uploadimage').files[0]);

使用$.ajax发送请求：

$.ajax({url:"images/insertOneImageFile",//后端Controller层处理图片文件的对应接口type:"post",data: formData,//发送的数据为FormData类async:false,cache:false,processData:false,// 不处理发送的数据contentType:false,// 不设置Content-Type请求头success:function(data){$("#path").text(data);
        console.log(data);},error:function(error){
        imagestring ="";alert("上传图片出错！");}});

4.后端处理FormData：

Controller层代码：

@RequestMapping("/insertOneImageFile")publicStringinsertOneImageFile(HttpServletRequest request,HttpServletRequest response,HttpSession session){MultipartHttpServletRequest multipartRequest=(MultipartHttpServletRequest) request;MultipartFile multipartFile = multipartRequest.getFile("file");assert multipartFile !=null;MultipartFileToFile.saveMultipartFile(multipartFile,"src/main/resources/static/images");returnMultipartFileToFile.saveMultipartFile(multipartFile,"target/classes/static/images");}

所使用的保存图片到本地路径的工具类：MultipartFileToFile.class：
（注：本文默认已经配置好Spring及SpringBoot环境）

packagecom.id.utils;importorg.springframework.web.multipart.MultipartFile;importjava.io.*;importjava.util.UUID;/**
 * @Description 存储和删除MultipartFile文件
 * @Author haoyalei
 **/publicclassMultipartFileToFile{/**
     *
     * @param file
     * @param targetDirPath 存储MultipartFile文件的目标文件夹
     * @return 文件的存储的绝对路径
     */publicstaticStringsaveMultipartFile(MultipartFile file,String targetDirPath){File toFile =null;if(file.equals("")|| file.getSize()<=0){returnnull;}else{/*获取文件原名称*/String originalFilename = file.getOriginalFilename();/*获取文件格式*/String fileFormat = originalFilename.substring(originalFilename.lastIndexOf("."));String uuid = UUID.randomUUID().toString().trim().replaceAll("-","");
            toFile =newFile(targetDirPath +File.separator + uuid + fileFormat);String absolutePath =null;try{
                absolutePath = toFile.getCanonicalPath();/*判断路径中的文件夹是否存在，如果不存在，先创建文件夹*/String dirPath = absolutePath.substring(0, absolutePath.lastIndexOf(File.separator));File dir =newFile(dirPath);if(!dir.exists()){
                    dir.mkdirs();}InputStream ins = file.getInputStream();inputStreamToFile(ins, toFile);
                ins.close();}catch(IOException e){
                e.printStackTrace();}return uuid + fileFormat;//uuid为保存时所使用的文件名；fileFormat为文件扩展名（.jsp什么的）}}//获取流文件privatestaticvoidinputStreamToFile(InputStream ins,File file){try{OutputStream os =newFileOutputStream(file);int bytesRead =0;byte[] buffer =newbyte[8192];while((bytesRead = ins.read(buffer,0,8192))!=-1){
                os.write(buffer,0, bytesRead);}
            os.close();
            ins.close();}catch(Exception e){
            e.printStackTrace();}}/**
     * 删除本地临时文件
     *
     * @param file
     */publicstaticvoiddeleteTempFile(File file){if(file !=null){File del =newFile(file.toURI());
            del.delete();}}}

附言

由于本选题程序不便于公开，故此处只贴上核心代码。