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

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

具体用法如下

<el-upload
  class="upload-demo"
  ref="upload"
  action="api/busstop/singlefile"   --上传地址
  accept="image/jpeg,image/jpg,image/png"
  :data="tempBusStop"           --其他参数
  :auto-upload="false"        --是否自动上传
  :on-success="handleAvatarSuccess"  --上传成功回调
>
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
</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