前端代碼：

html部分：

<el-upload

? ? ? class="avatar-uploader"

? ? ? action="http://localhost:9090/user/uploads/" 上傳地址

? ? ? :show-file-list="false" 是否照片墻也就是單個還是多個

? ? ? :on-success="handleAvatarSuccess" 成功之后的回調

? ? ? :before-upload="beforeAvatarUpload" 上傳之前做校驗

? ? >

? ? ? <img v-if="imageUrl" :src="imageUrl" class="avatar" /> 上傳成功后圖片顯示的位置

? ? ? <i v-else class="el-icon-plus avatar-uploader-icon"></i> 上傳的加號圖標

? ? </el-upload>

? ? <el-button type="primary" size="medium" @click="handleUploads()" style="margin-left: 100px">確認上傳</el-button>

js部分：

????imageUrl: "",

? ? beforeAvatarUpload(file) {?上傳圖片之前的校驗

? ? ? const isJPG = file.type === "image/jpeg" || file.type === "image/png"

? ? ? const isLt2M = file.size / 1024 / 1024 < 2

? ? ? if (!isJPG) {

? ? ? ? this.$message.error("上傳頭像圖片只能是 JPG 或 PNG 格式!")

? ? ? }

? ? ? if (!isLt2M) {

? ? ? ? this.$message.error("上傳頭像圖片大小不能超過 2MB!")

? ? ? }

? ? ? return isJPG && isLt2M

? ? },

handleAvatarSuccess(res, file) { 上傳之后讓圖片顯示出來

? ? ? ? this.userPicture =res.data

? ? ? this.imageUrl = URL.createObjectURL(file.raw)

? ? },

每次點擊都會向這個接口指定的文件夾上傳圖片，無論你最后用不用，存到數據庫中還需要調用修改方法。

后端代碼：

controller層接口：

@PostMapping("/uploads") 這里的形參file必須要和前端傳過來的實參保持一致，前端默認就是file

public Result uploadUserPic(MultipartFile file, HttpSession session) throws IOException {

? ??這里的session本來是想做的自動化一點，后來發(fā)現還是指定文件夾吧? ??

???String url =?FileUtils.uploadFile(file, session); 使用了工具類，可復用

? ?return new Result(Code.Request_OK,url,"上傳成功！");

}

工具類方法：

public static String uploadFile(MultipartFile photo, HttpSession session) throws IOException {

getOriginalFilename()獲取圖片的全名，getName()是獲取前端file的name

? ?String filename = photo.getOriginalFilename();

? ?UUID防止重名，并且解決中文路徑圖片不顯示的問題，lastIndexOf()可以找到文件后綴jpg前面的點.，再截取獲得.jpg

? ?String suffixName = filename.substring(filename.lastIndexOf("."));

? ?重新賦值文件名，前面是一堆字符串加上圖片后綴.jpg

? ?filename = UUID.randomUUID().toString() + suffixName;

uploadPath在上面定義了?public static final String uploadPath = ""

? ?String realPath = uploadPath;?

? ?創(chuàng)建upload目錄對應的File對象，并判斷目錄是否存在，如果不存在則創(chuàng)建

? ?File file = new File(realPath);

? ?if(!file.exists()) file.mkdir();

? ?圖片的最終路徑，target下面+通用分隔符+圖片名

? ?String finalPath = realPath + File.separator + filename;

? ?使用SpringMVC封裝好的transferTo()把文件傳輸到指定位置，參數是file對象，所以還需要創(chuàng)建最終路徑的file

? ?photo.transferTo(new File(finalPath));

? ?不用把最終的路徑返回，因為會在配置中設置訪問/uploads/**就是訪問這里，所以返回upload然后往數據庫里存

? ?String url = File.separator + "uploads" + File.separator + filename;

? ?return url;

}

設置映射路徑：

@Configuration

public class CorsConfig extends WebMvcConfigurationSupport {

protected void addResourceHandlers(ResourceHandlerRegistry registry) {

? ?當MVC訪問 前面的路徑時，不會當成路徑會看作靜態(tài)資源，要加上classpath比較好，而且是static而不是resources，因為啟動后默認會進入resources文件夾內

? ?registry.addResourceHandler("/**").addResourceLocations("classpath:/static/");

????代表著如果是9090/uploads/...就會自己找到后面的路徑，然后讀取圖片，雖然不正規(guī)，但真的很吊！?。。。?！，最后地方必須要有兩條杠，前面是什么杠這里就怎么寫

? ?registry.addResourceHandler("/uploads/**").addResourceLocations("file:/" + FileUtils.uploadPath);

????}

}

這就是完整的上傳圖片（文件）的前后端代碼，包括映射路徑使之正常顯示。