前后端分离（VUE+SPRINGBOOT）十 单文件文件上传 以及图片展示

VUE 的ELEMENT上传文件组件可以用el-upload标签

具体用法如下

  选取文件
  上传到服务器

submitUpload(){
  this.$refs.upload.submit();
},

springboot 后台代码

@PostMapping("/singlefile")
   public JSONObject singleFileUpload(MultipartFile file,String id) {
   
   try {
           byte[] bytes = file.getBytes();
           Path path = Paths.get(UPLOAD_FOLDER + file.getOriginalFilename());
           //如果没有files文件夹，则创建
           if (!Files.isWritable(path)) {
               Files.createDirectories(Paths.get(UPLOAD_FOLDER));
           }
           //文件写入指定路径
           Files.write(path, bytes);
           busStopService.updateBusStopimg(id, file.getOriginalFilename());
           return CommonUtil.successJson();
       } catch (IOException e) {
           e.printStackTrace();
           return CommonUtil.errorJson(ErrorEnum.E_500);
       }
}

页面效果如下

点击图片放大的组件可参考

v-image-preview