wangEditor 本地上传图片配置

clipboard.png

clipboard.png

怎么配置上传本地图片?官网也没说的太清楚

阅读 14.2k
3 个回答
<html>

<head>
    <script type="text/javascript" src="${res}/wapstatic/statics/plugins/wangEditor/wangEditor.min.js"></script>
</head>

<body>
    <div ref="editor"></div>
    <script>
        let editor;
        new Vue({
            el: '#app',
            data() {
                return {}
            },
            mounted() {
                this.initEditor();
            },
            methods: {
                initEditor() {
                    let that = this;
                    let E = window.wangEditor;
                    editor = new E(this.$refs.editor);
                    // 堆叠层级
                    editor.customConfig.zIndex = 0;
                    // 保留的功能按钮
                    editor.customConfig.menus = [
                        'undo',
                        'redo',
                        'image'
                    ];
                    // 本地图片上传:关闭外部图片引入
                    editor.customConfig.showLinkImg = false;
                    // 本地图片上传:写啥无所谓,反正customUploadImg()方法重写了
                    editor.customConfig.uploadImgServer = '/upload';
                    // 本地图片上传:重写方法
                    editor.customConfig.customUploadImg = function (files, insert) {
                        // 逐个上传
                        files.forEach(item => {
                            upload.image({
                                url: '${application.imageServerUrl}/upload/cors/single/图片上传接口',
                                file: item,
                                success: (res) => {
                                    if (res.status === 200) {
                                        // 塞进去
                                        insert(res.data.图片Url);
                                    }
                                },
                                error: () => (that.$message.error('上传失败'))
                            });
                        });
                    };
                    editor.create();
                }
            }
        });
    </script>
</body>

</html>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题