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

最新推荐文章于 2023-10-24 17:55:51 发布

爱学习的大雄

最新推荐文章于 2023-10-24 17:55:51 发布

阅读量3.8k

点赞数 2

文章标签： vue

本文链接：https://blog.csdn.net/qq_49137582/article/details/124287256

版权

遇到的问题

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

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

<template slot-scope="scope">
    <div class="singer-img">
        <img :src="getUrl(scope.row.pic)" style="width:100%"/>
    </div>
    <el-upload :action="uploadUrl(scope.row.id)" :before-upload="beforeAvatorUpload"
        :on-success="handleAvatorSuccess">
        <el-button size="mini">更新图片</el-button>
    </el-upload>
</template>

后端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")
        );
    }
}