龙空技术网

Springboot+图片文件上传+图片回显

bobo棒 284

前言:

眼前我们对“springmvc图片上传到本地后回显”可能比较讲究,看官们都需要分析一些“springmvc图片上传到本地后回显”的相关内容。那么小编也在网摘上搜集了一些关于“springmvc图片上传到本地后回显””的相关文章,希望各位老铁们能喜欢,大家一起来学习一下吧!

1.你应该知道的1.1 物理路径

文件上传成功后存储的实际路径就是物理路径,比如上传到 d:/pic/ 目录下

1.2 虚拟访问路径

要想通过http请求的方式访问上传的文件,就需要通过web服务器如tomcat和物理路径配置映射关系

比如 .其中这个/pic/ 就是虚拟路径

2. 如何配置 虚拟路径和物理路径映射

通过配置类的方式

@Configurationpublic class WebMvcConfig implements WebMvcConfigurer {  public static final String staticAccessPath = "/pic/**";//访问路径  public static final String uploadRealPath = "D:/pic/";//物理路径@Overridepublic 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.jpgString 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

标签: #springmvc图片上传到本地后回显