SpringBoot+ajax+formData實現圖片上傳和回顯

阿新 • • 發佈：2020-06-29

前端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/");
    }

}