vant+vue2+springboot实现图片上传，删除图片

  <van-field
            label="问题点图片"
            center
            :left-icon="require('../../assets/u8.svg')"
        >
          <template #input>
            <van-uploader v-model="fileList" multiple  accept=".jpg,.jpeg,.png,.doc, .docx,.pdf,.xlsx,.xls" :max-count="5"    :before-delete="beforeDelete" :after-read="afterRead" />
          </template>
        </van-field>

v-model绑定文件列表    multiple表示可以上传多个文件  accept表示可以接受上传的文件类型

max-count 表示最多上传文件个数   before-delete 表示文件删除调用函数  

after-read 表示文件上传函数

data(){
    return:{
        fileList:[]    
    }
}
,methods:{

     //图片上传，由提交按钮调用本方法实现手动上传
    reportPicUpload() {
      //如果文件列表为空，则不需要调用上传
      if (forms == null || forms.length == 0) {
        return;
      }
      axios({
        method: "post",
        url: base.SSO_BASEURL + "/app/kb/upload",
        data: forms,
        params: {
          kbId: this.formInfo.sysId
        }
      }).then((res) => {
        if (res.data.code == 200) {
          Toast.success("上传成功");
        } else {
          // Toast.fail(res.msg);
        }
      }).catch((err) => {
        Toast.fail("图片上传失败");
      });
    },
      beforeDelete(file) {
      console.log("del--file===>",file)
      forms = null;
      this.delFile(this.formInfo.sysId,file.url)
      return true;
    },
   delFile(id,url){
      this.$api.kbApi.delFile({id:id,url:url}).then(res=>{
        if (res.code==200){
          this.getById(id)
        }
      })
    },
  afterRead(file) {
      forms = new FormData();
      //"file"表示给后台传的属性名字
      forms.append("file", file.file); //获取上传图片信息
      this.reportPicUpload()

    },
 getById(id) {
      this.$api.kbApi.getById({id: id}).then((res) => {
        console.log(res)
        if (res.data.code === 200) {
          this.formInfo = res.data.data
          let files = res.data.data.files
          if (files){
            this.fileList= []
                //图片回显
            for (let i = 0; i < files.length; i++) {
              this.fileList.push({
                name: files[i].substring(files[i].lastIndexOf('\/') + 1,             
                files[i].length),
                url: files[i]
              })
            }
          }
        }
      });
    },

}

后端接口

        文件上传

 @PostMapping("kb/upload")
    public JsonResult upload(MultipartFile file,@RequestParam Map<String, String> map){
        log.info("文件上传{}{}",map.get("kbId"),file);
        try {
            String path = "D:/fileUpload/"+"csr"+"/"+"tyxd";
            File filePath = new File(path);
            if (!filePath.exists() && !filePath.isDirectory()) {
                filePath.mkdir();
            }
            String originalFileName = file.getOriginalFilename();
            File targetFile = new File(path, originalFileName);
            FileCopyUtils.copy(file.getInputStream(), new FileOutputStream(targetFile));
            String fileUrl = CommonsUtil.SERVER_ADDRESS_TEST+path.replace("D:","")+"/"+originalFileName;
            Map<String,Object> data = new HashMap<>();
            data.put("rs",true);
            data.put("file",fileUrl);
            operationEyeOfHeavenService.addFile(map.get("kbId"),fileUrl);
            return JsonResult.ok(data);
        } catch (Exception e) {
            e.printStackTrace();
            return JsonResult.error("上传失败");
        }
    }

文件删除

 @PostMapping("kb/delFile")
    public JsonResult delFile(@RequestBody FileDelDto dto){
        return   operationEyeOfHeavenService.delFile(dto);
    }

  @Override
    @Transactional(rollbackFor = Exception.class)
    public JsonResult delFile(FileDelDto dto) {
        log.info("删除文件{}",dto);
        CommonsUtil.delFile(dto.getUrl());
        associationImagesMapper.delByFkIdAndUrl(dto.getId(),dto.getUrl());
        return JsonResult.ok();
    }

    public static  final String SERVER_ADDRESS_TEST = "http://localhost:8082";
    public static  final String DISK = "D:";
//    public static  final String SERVER_ADDRESS_PRODUCT = "http://localhost:8081";

    public static String fileUrlTransFor(String url){
        if (StringUtils.isBlank(url)){
            return null;
        }
        return url.replace(SERVER_ADDRESS_TEST,DISK);
    }


    public static void delFile(String url){
           //使用hutool的工具类删除文件
        FileUtil.del(fileUrlTransFor(url));
    }