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;
},
