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

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

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

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import attachmentModule from '@wangeditor/plugin-upload-attachment'
import { Boot } from '@wangeditor/editor'
 
export default {
    name: 'MyEditor',
    components: { Editor, Toolbar },
    data() {
        return {
            editor: null,
            html: '
hello world
',
            toolbarConfig: {
                insertKeys: {
                    index: 0, // 自定义插入的位置
                    keys: ['uploadAttachment'], // “上传附件”菜单
                },
                // toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
                excludeKeys: [
                    'fullScreen'
                ],
            },
            editorConfig: {
                placeholder: '请输入内容...',
                // autoFocus: false,
                hoverbarKeys: {
                    attachment: {
                        menuKeys: ['downloadAttachment'], // “下载附件”菜单
                    },
                },
                // 所有的菜单配置，都要在 MENU_CONF 属性下
                MENU_CONF: {
                    uploadImage: {
                        server:'',
                        maxFileSize: 1024 * 1024 * 1024,
                        fieldName: "file",
                        meta: {
                            token: '',
                        },
                        metaWithUrl: true,
                    },
                    uploadVideo: {
                        server: ,
                        maxFileSize: 1024 * 1024 * 1024,
                        fieldName: "file",
                        meta: {
                            token:'',
                        },
                        metaWithUrl: true,
                    },
  uploadAttachment: {
                        server: '',
                        fieldName: "file",
                        meta: {
                            token: '',
                        },
                        metaWithUrl: true,
                        maxFileSize: 1024 * 1024 * 1024, // 10M
                    }
                }
            }
        }
    },
    props: {
//父附件传递过来的数据，用来保持编辑时数据同步
        initData: {
            type: String,
            require: false,
            default: ""
        }
    },
    created() {
        if (Boot.plugins.length < 13) {
            //判断如果已经插入进去，不在二次插入
            Boot.registerModule(attachmentModule);
        }
    },
    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错
 
        },
        onChange(editor) {
            this.$emit("SynchronizationData", editor.getHtml())
        },
 
    },
    mounted() {
        // 模拟 ajax 请求，异步渲染编辑器
        setTimeout(() => {
            this.html = '
输入内容
'
            if (this.initData !== "") {
                this.html = this.initData
            }
        }, 1000)
 
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁 editor ，重要！！！
    },
}
script>
 
<style src="@wangeditor/editor/dist/css/style.css">style>

第三步：父组件引用

  <Editor :initData="initData" @SynchronizationData="SynchronizationData">Editor>

 第四步：写后台

    @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;//上传视频时返回的封面，非必须
    }
}
 

上传成功后，上传文件地址嵌入文本框，无需对上传成功后返回值做另外处理，只要保证返回值是规定格式就可。