Springboot+圖檔檔案上傳+圖檔回顯

1.你應該知道的

1.1 實體路徑

檔案上傳成功後存儲的實際路徑就是實體路徑，比如上傳到 d:/pic/ 目錄下

1.2 虛拟通路路徑

要想通過http請求的方式通路上傳的檔案，就需要通過web伺服器如tomcat和實體路徑配置映射關系

比如 http://localhost:9999/pic/test.jpg.其中這個/pic/ 就是虛拟路徑

2. 如何配置 虛拟路徑和實體路徑映射

通過配置類的方式

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
  public static final String staticAccessPath = "/pic/**";//通路路徑
  public static final String uploadRealPath = "D:/pic/";//實體路徑
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
   registry.addResourceHandler(staticAccessPath).addResourceLocations("file:"+uploadRealPath);
  }
}           

3. Controller 處理檔案上傳

/**
* 檔案上傳
* @param file
* @return
* @throws IOException
*/
@RequestMapping("upFile")
public Result upFile(MultipartFile file) throws IOException {
if(null!=file &&!file.isEmpty()){//有檔案
String path= WebMvcConfig.uploadRealPath;//檔案上傳位址
String oName = file.getOriginalFilename();//原始檔案名稱 a.jpg
String filename = UUID.randomUUID()+oName.substring(oName.lastIndexOf("."));//防止檔案重名
File file1 = new File(path, filename);//在硬碟建立一個新的檔案
file.transferTo(file1);//檔案寫入硬碟
return Result.success("/pic/"+filename);//傳回檔案的虛拟路徑
}
return Result.fail(500,"請選擇上傳檔案");
}           

4. Vue -上傳頁面

4.1 官網檢視案例

4.2 複制官網案例稍微修改

4.3效果

5 list 顯示上傳的圖檔

5.1 table處理

5.2 method

getBaseUrl(url){
return this.$baseURL+url;
},           

5.3 效果

6. 其他

6.1 資料接存儲是什麼？

6.2.main.js