mavonEditor中的图片上传与删除(前后端交互)

我设置的存储图片服务器的地址: D:\Program Files\apache-tomcat-9.0.43\webapps\ROOT\newsimg

1.图片上传

1.1.前端

// 文本上传图片事件处理函数
 imgAdd(pos, file) {
  var formdata = new FormData();
  formdata.append('file', file); //前端封装图片数据 ‘file’向后端传递的 name
  this.$http({ //调用 java 后端上传图片到服务器端
    url: 'news/newsCtl/newsupload', //自定义后端服务器地址,后端同文件上传功能
    data: formdata,
    method: "post",
    headers: {
      'Content-Type': 'multipart/form-data'
    },
  }).then((resp) => { //resp 后端响应数据
    //将服务器返回的图片地址插入到编辑器内
    this.$refs.md.$img2Url(pos, "http://127.0.0.1:8888/" + resp.data.data);
  })
}

1.1.后端

    /**
     * 图片上传
     *
     * @param file
     * @return
     * @throws IOException
     */
    @PostMapping("/newsupload")
    public CommonResult newsupload(@RequestParam("file") CommonsMultipartFile file) throws IOException {
        /*  图片存储
            1.图片存储到服务器端的硬盘
            2.必须在客户端可访问到
         */
        // 名字容易重复,进行改名
        String newfilename = new Date().getTime() + file.getOriginalFilename();
        // 后端存储地址
        String path = newsimgpath + "\\" + newfilename;
        file.transferTo(new File(path));// 保存入该地址
        CommonResult commonResult = new CommonResult(200, "newsimg/" + newfilename, "上传成功");
        return commonResult;
    }

1.3测试

开始服务器中没有第一张图片

上传图片

2. 图片删除

2.1前端

// 删除图片时间处理函数
imgDel(pos) {
  var imgUrl = pos[0]; //获取到图片服务器地址
  this.$http.get("/news/newsCtl/deleteImgpath", {
      params: {
        imgUrl: JSON.stringify(imgUrl)
      }
    })
    .then(function(res) {
      if (res.data.code == 200) {
        this.$message({
          message: res.data.message,
          type: "success"
        });
      }
    })
}

2.2后端

思路

1> 这里主要注意前端给后端传送的imgUrl地址,需要进行字符串的截取,只拿到图片的名称,

如果不熟悉Debug操作, 可以将每一步的截取对象打印处理, 看是否符合要求 

2> 再将名称与图片存储的服务器地址进行拼接

3> 然后创建File对象进行删除服务器中相应的图片

4> 最后响应数据给前端

    /**
     * 除文本中已经服务器存储的图片的记录
     * @param imgUrl
     * @return
     * @throws UnsupportedEncodingException
     */
    @GetMapping("deleteImgpath")
    public CommonResult deleteImgpath(@RequestParam(value = "imgUrl", required = false) String imgUrl) throws UnsupportedEncodingException {
        CommonResult commonResult = null;
        System.out.println("1.前端传送的imgUrl: " + imgUrl);

        // 解码URL
        String decodedUrl = URLDecoder.decode(imgUrl, "UTF-8");
        System.out.println("2.解码后的imgUrl: " + decodedUrl);

        // 提取文件名部分
        String fileName = decodedUrl.substring(decodedUrl.lastIndexOf("/") + 1);// 截取的索引位置 = 最后一个/的索引 + 1

        System.out.println("3.截取后的文件名: " + fileName);

        //fileName.replace("\"", "")是一个字符串操作方法，用于将字符串中的指定字符（在这里是双引号）替换为空字符串。
        fileName = fileName.replace("\"", "");

        // 构建完整的图片路径
        String imgPathString = newsimgpath + File.separator + fileName;
        System.out.println("4.完整的文件地址: " + imgPathString);
        // 创建文件对象
        File file = new File(imgPathString);
        System.out.println("5.待删除的文件对象: " + file);

        if (file.isFile() && file.exists()) { // 路径为文件且不为空则进行删除
            if (file.delete()) {
                commonResult = new CommonResult(200, "文本图片删除成功");
                System.out.println("文本图片删除成功");
            }
        }
        return commonResult;
    }

2.3测试

删除刚刚上传的图片

删除成功