Vue+SpringBoot实现图片上传和回显

短命女 2024-04-17 16:13 70阅读 0赞

![在这里插入图片描述][20190828150901694.png]

> 1.  点击Vue图标，选择电脑中图片，选中后把图片替换为选中图片
> 2.  点击上传，通过文件流的方式把图片上传至服务器，服务器将图片保存至指定位置，并根据时间生成指定名称，上传成功，返回新生成文件名。
> 3.  服务器自定义接口，通过需要的文件名，返回指定文件流
> 4.  上传图片成功后，在旁边显示上传成功的图片

1.  点击Vue图标，选择电脑中图片，选中后把图片替换为选中图片：

import axios from "axios";
    export default { 
      props: { },
      data() { 
        return { 
          file: null,
          f: null,
          loadImage: ""
        };
      },
      methods: { 
        add() { 
          this.$refs.file.click();
        },
        getFile(event) { 
          this.file = event.target.files[0];
          const item = { 
            name: this.file.name,
            size: this.file.size,
            file: this.file
          };
          this.html5Reader(this.file, item);
          this.f = item;
        },
        // 将图片文件转成BASE64格式
        html5Reader(file, item) { 
          const reader = new FileReader();
          reader.onload = e => { 
            this.$set(item, "src", e.target.result);
          };
          reader.readAsDataURL(file);
        }
      }
    };

1.  点击上传，通过文件流的方式把图片上传至服务器，服务器将图片保存至指定位置，并根据时间生成指定名称，上传成功，返回新生成文件名。：

/** * 上传图片接口 * */
        @PostMapping("/upload")
        public String singleFileUpload(@RequestParam("file") MultipartFile file,
                                       HttpServletRequest request) { 
            try { 
                byte[] bytes = file.getBytes();
                String imageFileName = file.getOriginalFilename();
                String fileName = UpPhotoNameUtils.getPhotoName("img",imageFileName);
                Path path = Paths.get(UPLOAD_PATH + fileName);
                Files.write(path, bytes);
                System.out.println(fileName+"\n");
                return fileName;
            } catch (IOException e) { 
                e.printStackTrace();
            }
    
            return "";
        }
    /** * 处理图片名的工具类 * */
    public class UpPhotoNameUtils { 
        public static String getPhotoName(String name,String imageFileName){ 
            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 = imageFileName.substring(imageFileName.lastIndexOf("."));//截取之后的值
            fileName=fileName+ endName;
            return fileName;
        }
    }

1.  服务器自定义接口，通过需要的文件名，返回指定文件流：

//使用流将图片输出
        @GetMapping("/getImage/{name}")
        public void getImage(HttpServletResponse response, @PathVariable("name") String name) throws IOException { 
            response.setContentType("image/jpeg;charset=utf-8");
            response.setHeader("Content-Disposition", "inline; filename=girls.png");
            ServletOutputStream outputStream = response.getOutputStream();
            outputStream.write(Files.readAllBytes(Paths.get(UPLOAD_PATH).resolve(name)));
            outputStream.flush();
            outputStream.close();
        }

1.  上传图片成功后，在旁边显示上传成功的图片：

submitForm(event) { 
          event.preventDefault();
          let formData = new FormData();
          formData.append("file", this.file);
          let config = { 
            headers: { 
              "Content-Type": "multipart/form-data"
            }
          };
          axios
            .post("http://.../test/upload", formData, config)
            .then(res => { 
              console.log(res);
              if (res.status === 200) { 
                try { 
                  console.log(".../getImage/" + res.data);
                  if (typeof this.loadImage !== "undefined") { 
                    this.loadImage =
                      "http:.../getImage/" + res.data;
                  }
                } catch (e) { 
                  console.log("捕获到异常：", e);
                }
              } else { 
                console.log("失败" + 400);
              }
            });
        }

[20190828150901694.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/8050226e49854a5b9afa56fbca85876c.png