vue2+ summernote 文件上传

在mounted 里面加载插件
在页面里写入summernote

                <div name="summernote" ref="summernote"></div>

在js里面加载：

  $(this.$refs.summernote).summernote({
      minHeight: 250,
      lang: "zh-CN",
      callbacks: {
        onImageUpload: (uploadFile=>{
          var formData = new FormData();
          formData.append("uploadFile", uploadFile[0]);
          let config = {
            headers: {
              "Content-Type": "multipart/form-data"
            }
          };
          this.$http
          //第一个参数是上传地址,字符串类型
          //第二个是表单数据
          //第三个是上传配置
            .post(this.API.IMAGE_UPLOAD_ADDRESS, formData, config)
            .then(response => { 
                //以下是默认
              $(this.$refs.summernote).summernote('insertImage',response.data,'img'); 
            });
        })
      }
    });

然后就可以正常上传

controller里面的写法：

 @PostMapping(path = "/v1/upload")
    public String upload(MultipartFile uploadFile, HttpServletRequest request, Map<String, String> params) throws IOException {
        Optional.ofNullable(uploadFile).orElseThrow(() -> new CustomerException("文件不存在"));
        String fileName = uploadFile.getOriginalFilename();
        String leftPath = request.getServletContext().getRealPath("/images");
        File file = new File(leftPath, fileName);
        if (!file.getParentFile().exists()) {
            file.getParentFile().mkdirs();
        }
        if (file.exists() && file.isFile()) {
            file.delete();
        }
        uploadFile.transferTo(file);
        //我使用的是阿里云的方式保存文件。你可以保存在自己服务器里面
        OSSTools tools = new OSSTools();
        String type = fileName.substring(fileName.lastIndexOf(".") + 1);
        String fileType = "image/" + type;
        fileName = UUID.randomUUID().toString() + "." + type;

        String logoPath = tools.uploadObj("image", fileName, file, fileType);
        LOGGER.info(logoPath);
        //然后返回路径
        return logoPath;
    }