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