一、問題介紹

在一個在線圖片分享系統(tǒng)中，前端使用JS+jQuery，后端使用Maven管理項目，采用分層次目錄結(jié)構(gòu)（Controller、Service、Mapper等）的一個Java語言編寫的SSM（Spring+SpringBoot+Mybatis）項目中，需要實現(xiàn)一個前端標簽上傳圖片，后端Controller層接收并處理圖片。

二、前端上傳圖片方案

1.上傳

上傳圖片的方式有很多，可以采用base64、blob等類型處理，而本文由于前端上傳圖片采用的是原生JS標簽input的file類型：

<input type="file">

這個標簽選擇文件后，圖片的路徑會顯示在這個標簽中，但直接使用這個標簽顯然是不可以獲取到圖片的（你只是訪問本地路徑可以看得見圖片，但網(wǎng)頁它不認識這個路徑所意味著的圖片文件）。

2.前端網(wǎng)頁顯示此上傳的圖片

（1）HTML代碼：

<input type="file" id="uploadimage" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
<img id="showimage" style="width: auto;height: 80%;" src="" alt="請上傳圖片">

屬性解釋：
<input>標簽：
id：ID屬性值，用于JS定位該標簽；
type：設(shè)置為file，提供一個可以上傳文件的按鈕；
accept：顧名思義，是限制接受的文件類型的，規(guī)定這個屬性值可限定文件類型為圖片，如.jpg、.png（高清）、.gif（動圖）、.jpeg、.svg（不推薦）；
<img>標簽：
id：同上；
style：樣式設(shè)定；
src：路徑；
alt：加載圖片失敗或src為空時的默認文本。

（2）JS代碼：

 document.getElementById("uploadimage").onchange = function(){//當input標簽上傳了一個圖片時
     var file = this.files;//將當前圖片文件賦值給file變量
     var reader = new FileReader();//創(chuàng)建一個新FileReader類
     reader.readAsDataURL(file[0]);//將圖片文件傳給該FileReder
     reader.onload = function ()//加載
     {
         var image = document.getElementById("showimage");
         image.src = reader.result;
     };
 }

3.前端上傳該圖片文件

使用JS代碼處理該文件，采用FormData類型將該圖片以二進制流的形式發(fā)給后端：
JS代碼：
FormData類的使用：

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

使用$.ajax發(fā)送請求：

$.ajax({
    url: "images/insertOneImageFile",//后端Controller層處理圖片文件的對應(yīng)接口
    type: "post",
    data: formData,//發(fā)送的數(shù)據(jù)為FormData類
    async: false,
    cache: false,
    processData: false,   // 不處理發(fā)送的數(shù)據(jù)
    contentType: false,   // 不設(shè)置Content-Type請求頭
    success:function (data) {
        $("#path").text(data);
        console.log(data);
    },
    error: function(error){
        imagestring = "";
        alert("上傳圖片出錯！");
    }
});

4.后端處理FormData：

Controller層代碼：

    @RequestMapping("/insertOneImageFile")
    public String insertOneImageFile(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");
        return MultipartFileToFile.saveMultipartFile(multipartFile, "target/classes/static/images");
    }

所使用的保存圖片到本地路徑的工具類¹：MultipartFileToFile.class：
（注：本文默認已經(jīng)配置好Spring及SpringBoot環(huán)境）

package com.id.utils;

import org.springframework.web.multipart.MultipartFile;

import java.io.*;
import java.util.UUID;

/**
 * @Description 存儲和刪除MultipartFile文件
 * @Author haoyalei
 **/
public class MultipartFileToFile {

    /**
     *
     * @param file
     * @param targetDirPath 存儲MultipartFile文件的目標文件夾
     * @return 文件的存儲的絕對路徑
     */
    public static String saveMultipartFile(MultipartFile file, String targetDirPath){

        File toFile = null;
        if (file.equals("") || file.getSize() <= 0) {
            return null;
        } else {

            /*獲取文件原名稱*/
            String originalFilename = file.getOriginalFilename();
            /*獲取文件格式*/
            String fileFormat = originalFilename.substring(originalFilename.lastIndexOf("."));

            String uuid = UUID.randomUUID().toString().trim().replaceAll("-", "");
            toFile = new File(targetDirPath + File.separator + uuid + fileFormat);

            String absolutePath = null;
            try {
                absolutePath = toFile.getCanonicalPath();

                /*判斷路徑中的文件夾是否存在，如果不存在，先創(chuàng)建文件夾*/
                String dirPath = absolutePath.substring(0, absolutePath.lastIndexOf(File.separator));
                File dir = new File(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什么的）
        }

    }

    //獲取流文件
    private static void inputStreamToFile(InputStream ins, File file) {
        try {
            OutputStream os = new FileOutputStream(file);
            int bytesRead = 0;
            byte[] buffer = new byte[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
     */
    public static void deleteTempFile(File file) {
        if (file != null) {
            File del = new File(file.toURI());
            del.delete();
        }
    }
}

附言

由于本選題程序不便于公開，故此處只貼上核心代碼。

到了這里，關(guān)于SpringBoot項目中前后端對圖片的上傳與接收操作的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！