[项目经验]——图片上传以及回显

🏳️‍🌈个人网站：code宝藏 👈，欢迎访问🎉🎉
🙏如果大家觉得博主写的还不错的话，可以点点关注，及时获取我的最新文章
🤝非常感谢大家的支持与点赞👍
📚介绍在Springboot+vue中是如何处理图片上传及回显的

文章目录

后端配置

1、设置 application.yml

web:
   #存储图片地址
  basePath: K:/myimg
  #资源映射路径前缀
  resourcePrefix: /resource

2、设置拦截器，对图片静态资源直接放行

@ConfigurationpublicclassSaTokenConfigureimplementsWebMvcConfigurer{@Value("${web.basePath}")String basePath;@Value("${web.resourcePrefix}")String resourcePrefix;//注册Sa-Token的注解拦截器，打开注解式鉴权功能@OverridepublicvoidaddInterceptors(InterceptorRegistry registry){// 注册拦截器，并排除不需要鉴权的路径//这里配置自己的拦截器
        registry.addInterceptor(newMyInterceptor()).addPathPatterns("/**").excludePathPatterns(resourcePrefix+"/**");}/**
     * 开启跨域
     */@OverridepublicvoidaddCorsMappings(CorsRegistry registry){// 设置允许跨域的路由
        registry.addMapping("/**")// 设置允许跨域请求的域名.allowedOriginPatterns("*")// 是否允许证书（cookies）.allowCredentials(true)// 设置允许的方法.allowedMethods("*")// 跨域允许时间.maxAge(3600);}@OverridepublicvoidaddResourceHandlers(ResourceHandlerRegistry registry){//配置拦截器访问静态资源
        registry.addResourceHandler(resourcePrefix+"/**").addResourceLocations("file:"+basePath+"/");}}

3、上传图片控制器

@RestController@RequestMapping("/file")publicclassFileController{@Value("${web.basePath}")String basePath;@Value("${web.basePath}")String resourcePrefix;@PostMapping("/upload")publicResultBeanuploadFile(MultipartFile file){String oldName = file.getOriginalFilename();//进行名字更改，调整成一定的格式String newName =FileUtils.getFileName("img",oldName);//本地保存的真实地址String path = basePath+'/'+newName;FileUtils.upload(file, path);//返回ResultBean res =ResultBean.success();//拼接映射资源前缀后，生成回显地址String viewPath = resourcePrefix+"/"+newName;
        res.put("imgPath",viewPath);return res;}}

4、FileUtils工具类

/**
 * 文件上传工具包
 */publicclassFileUtils{publicstaticbooleanupload(MultipartFile file,String realPath){File dest =newFile(realPath);//判断文件父目录是否存在if(!dest.getParentFile().exists()){
            dest.getParentFile().mkdir();}try{//保存文件
            file.transferTo(dest);returntrue;}catch(IllegalStateException e){
            e.printStackTrace();thrownewMyException("保存失败");}catch(IOException e){
            e.printStackTrace();thrownewMyException("保存失败");}}/**
     *创建出这种格式的图片img_2022_02_11095154516.jpg，可以避免与之前的重复了
     *你也可以根据自己情况设计
     * @param name  文件类别
     * @param originFileName 文件初始名
     * @return
     */publicstaticStringgetFileName(String name,String originFileName){String fileName = name;Calendar cal=Calendar.getInstance();int year=cal.get(Calendar.YEAR);
        fileName=fileName +"_"+ year;int month=cal.get(Calendar.MONTH)+1;
        fileName=fileName+"_";if(month<10){
            fileName=fileName+"0";}
        fileName=fileName+month;//生成文件名的日部分int day=cal.get(Calendar.DAY_OF_MONTH);
        fileName=fileName+"_";if(day<10){
            fileName=fileName+"0";}
        fileName=fileName+day;//生成文件名的小时部分int hour=cal.get(Calendar.HOUR_OF_DAY);if(hour<10){
            fileName=fileName+"0";}
        fileName=fileName+hour;//生成文件名的分钟部分int minute=cal.get(Calendar.MINUTE);if(minute<10){
            fileName=fileName+"0";}
        fileName=fileName+minute;//生成文件名的秒部分int second=cal.get(Calendar.SECOND);if(second<10){
            fileName=fileName+"0";}
        fileName=fileName+second;//生成文件名的毫秒部分int millisecond=cal.get(Calendar.MILLISECOND);if(millisecond<10){
            fileName=fileName+"0";}if(millisecond<100){
            fileName=fileName+"0";}
        fileName=fileName+millisecond;//生成文件的扩展名部分,只截取最后单位String endName = originFileName.substring(originFileName.lastIndexOf("."));//截取之后的值
        fileName=fileName+ endName;return fileName;}}

前端配置

1、vue使用了element-ui

<el-uploadclass="avatar-uploader"action="lei":show-file-list="false":http-request="httpRequest"><imgv-if="imgPath":src="imgPath"class="avatar"/><iv-elseclass="el-icon-plus avatar-uploader-icon"></i></el-upload>

2、上传方法

//这个是你实际的后端地址
this.basePath=xxx

//实现图片上传功能httpRequest(item){//验证图片格式大小信息const isJPG =
          item.file.type =="image/jpeg"|| item.file.type =="image/png";if(!isJPG){this.$message.error("上传图片只能是 JPG 或 PNG 格式!");}if(isJPG){let data =newFormData();const that =this;
        data.append("file", item.file);apiUpload(data).then((res)=>{
            that.imgPath = res.imgPath;//拼接实际的后端地址
            that.imgPath =this.basePath + res.imgPath;});}}

3、封装的axios的请求方法：

关于具体的封装，可以看我的这一篇文章：vue优雅使用axios

exportfunctionapiUpload(data){returnrequest({
        url:'/file/upload',
        method:'post',
        data:data
    })}

回显的其他思路

我在写一块内容的时候还查到了一些其他思路，这里也一并写出来给大家参考

我们前面提供的方法对图片作为静态资源直接放行，不用拦截器拦截，但可能有些人需要对这些图片的访问进行控制，比如进行权限验证呀，那就不能使用这种直接放行的办法了，需要通过controller处理

我们可以通过输出流的方法来获取

@GetMapping("/view/{imgPath}")publicvoidgetFeedBackPicture(HttpServletResponse response,@PathVariable("imgPath")String imgPath)throwsException{//basePath，我们存放在本地的实际地址String realPath= basePath+'/'+imgPath;FileInputStream inputStream =newFileInputStream(realPath);int i = inputStream.available();//byte数组用于存放图片字节数据byte[] buff =newbyte[i];
        inputStream.read(buff);//记得关闭输入流
        inputStream.close();//设置发送到客户端的响应内容类型
        response.setContentType("image/*");OutputStream out = response.getOutputStream();
        out.write(buff);//关闭响应输出流
        out.close();}

前端请求直接通过src来添加具体路径即可

<imgsrc="http://localhost:8080/view/123.png"/>