项目如何实现富文本框文件上传

wangEditor作为富文本框架

第一步：安装wangEditor

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save

yarn add @wangeditor/editor-for-vue
# 或者 npm install @wangeditor/editor-for-vue --save

yarn add @wangeditor/plugin-upload-attachment

第二：写富文本页面，单独写为一个组件

第三步：父组件引用

 第四步：写后台

    @PostMapping(value = "/fileReleasesUpload")
    public FileUploadVo fileReleasesUpload(HttpServletRequest request, HttpServletResponse response) {
        FileUploadVo vo = new FileUploadVo();
        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
        MultipartFile file = multipartRequest.getFile("file");// 获取上传文件对象
        //具体文件上传
        CommonUtils.upload(file);

        if (上传成功) {
            FileUploadVo.FileEsNode esNode = new FileUploadVo.FileEsNode();
            esNode.setAlt(file.getOriginalFilename());
            esNode.setUrl(prePath+savePath);
            vo.setData(esNode);
            vo.setErrno(0);
            return vo;
        } else {
            vo.setErrno(1);
            vo.setMessage(false);
            return vo;
        }
    }

返回值需要按照要求格式：

定义返回类：

import java.io.Serializable;


@Data
public class FileUploadVo implements Serializable {
    private Integer errno;
    private FileEsNode data;
    private Boolean message;

    @Data
    public static class FileEsNode {
        String url;// 视频/图片 src ，必须
        String alt;// 图片描述文字，非必须
        String href;// 图片的链接，非必须
        String poster;//上传视频时返回的封面，非必须
    }
}

搞定！