vue前后端分离图片无法显示的问题

分手后的思念是犯贱 2023-09-29 10:59 15阅读 0赞

### 遇到的问题 ###

在实现vue与后端实现图片上传与回显中我遇到了图片显示不出的问题（使用了虚拟路径进行配置），最后发现我是访问路径错误,同时也有文件名带中文的图片。

前端我使用的是el-upload组件来进行文件的上传

后端controller

@RequestMapping(value = "/updateSingerPic",method = RequestMethod.POST)
    public JsonResult<String> updateSingerPic(@RequestParam("file") MultipartFile avatorFile, @RequestParam("id")int id){
        
        if(avatorFile.isEmpty()){
        
            throw new FileEmptyExcepetion("文件为空");
        }
        //获取最后一个.的下标
        int index = avatorFile.getOriginalFilename().lastIndexOf(".");
        //获取文件的后缀名
        String suffix = avatorFile.getOriginalFilename().substring(index);
        //文件名=当前时间到毫秒+uuid+文件后缀名
        String fileName = System.currentTimeMillis()+ UUID.randomUUID().toString()+suffix;
        //文件路径
        String filePath = Consts.SINGERPICADDRESS;
        //如果文件路径不存在，新增该路径
        File file1 = new File(filePath);
        if(!file1.exists()){
        
            file1.mkdir();
        }
        //实际的文件地址
        File dest = new File(filePath+System.getProperty("file.separator")+fileName);
        //存储到数据库里的相对文件地址
        String storeAvatorPath = "/img/singerPic/"+fileName;
        System.out.println("存储到数据库的"+storeAvatorPath);
        System.out.println(dest);
        System.out.println(id);
        try {
        
            avatorFile.transferTo(dest);
        } catch (IOException e) {
        
            throw new FileUploadIOException("文件读写异常");
        }catch (FileStateException e){
        
            throw new FileStateException("文件状态异常");
        }
        Singer singer = new Singer();
        singer.setId(id);
        singer.setPic(storeAvatorPath);
        boolean flag = singerService.update(singer);
        if(!flag){
        
            throw new UpdateException("更新数据时产生异常");
        }
        return new JsonResult<>(OK,storeAvatorPath);
    }

### 可能的问题 ###

#### 访问的图片名称中包含中文或空格 ####

如果是出现这种错误,则只会部分包含中文或空格文件名的图片显示不出来

原因：url中传递的信息会经过转码后再传到后端，所以这里面的中文会被转译成其它的字符，导致失败，然后报404

解决方案1：修改图片的文件名；

解决方案2：application.properties中配置如下即可

# 解决url中中文路径的问题
    spring.mvc.pathmatch.matching-strategy=ant_path_matcher

#### 虚拟路径配置错误，访问路径错误 ####

> 真实路径最后必须要有`/`

将路径设置为常量放在一个工具类中：

public static final String SINGERPICADDRESS="F:"+System.getProperty("file.separator")+"Picture"+System.getProperty("file.separator")+"img"+System.getProperty("file.separator")
            +"singerPic";

虚拟路径配置如下：

> System.getProperty(“file.separator”)：作用相当于`/`
> 
> 举例子：
> 
> addResourceHandler中的路径为前端访问的src路径（**即创建的虚拟路径**）：`"/img/singerPic/**"`,在前端url栏中输入`/img/singerPic/+图片文件名`即可访问到该图片
> 
> 如果你的图片放在C盘下的img文件夹内，则addResourceLocations内的配置路径为（**即需要映射的真实路径**）:`"file:"+System.getProperty("file.separator")+"img"+System.getProperty("file.separator")`

@Configuration
    public class FileConfig implements WebMvcConfigurer {
        
    
        @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry){
        
            registry.addResourceHandler("/img/singerPic/**").addResourceLocations(
            //歌手头像地址
            //Consts.SINGERPICADDRESS为上述设置的常量
                    "file:"+Consts.SINGERPICADDRESS+System.getProperty("file.separator")
            );
        }
    }

**注意点**：映射的真实路径最后面一定要有`System.getProperty("file.separator")`或者`/`

这个时候你访问http://localhost:8888/img/singerPic/wanglihong.jpg即可成功显示

![image-20220419175237713][]

#### 访问路径错误 ####

比如我设置的虚拟路径为：`/img/singerPic/**`，我需要访问目录下的wanglihong.jpg文件，则我访问的路径应该是：http://localhost:8888/img/singerPic/wanglihong.jpg，注意其中的`/`不能多。

如果你的**项目有设置项目名**，则还应该在路径上添加上项目名

#### 项目未进行热部署 ####

如果项目没有进行热部署的话，每次更新图片后都需要手动重启服务器才能正常显示图片，具体操作网上有很多。

### 扩展 ###

1.  在文件上传中出现文件读写异常的问题
    
    > 这个错误在于创建文件目录时
    
    原因：不能在static文件中去自动创建目录，需要你自行创建好  
    项目没有进行热部署的话，每次更新图片后都需要手动重启服务器才能正常显示图片，具体操作网上有很多。

[image-20220419175237713]: https://img-blog.csdnimg.cn/img_convert/b59fa07bc08cabf588f0b49b890d8a1d.png