wangeditor 上传图片到服务器、七牛云

最新推荐文章于 2024-08-14 15:16:27 发布

gyuhao_o

最新推荐文章于 2024-08-14 15:16:27 发布

阅读量2.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：资讯文章标签：前端 vue 七牛云存储

本文链接：https://blog.csdn.net/m0_48571414/article/details/129119882

资讯专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何在wangeditor中配置图片插入功能，包括以base64格式直接插入文本和上传图片至七牛云。在使用base64格式时，设定了大小限制。对于七牛云上传，文章详细阐述了如何自定义上传函数，获取七牛Token，以及如何处理上传成功后的回调，将图片URL插入编辑器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章编辑难免需要插入图片，wangeidtor也是支持的，看看怎么配置吧。

一、需要后端配合，配置固定的服务端 response body 格式

这里参考官网配置，主要关注 “服务端地址”、“基本配置” 和 “回调函数” 三个栏目

二、以base64格式，将图片插入文本内容（不需要上传到任何服务器）

示例代码：

<Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :defaultConfig="toolbarConfig"
      :mode="mode"
/>
<input v-model="articleForm.title" class="article-title-box" maxlength="30" :border="false" placeholder="请输入文章标题（2~30字以内）" />
<Editor
       style="height: 500px;overflow-y: hidden;"
       :defaultConfig="editorConfig"
       :mode="mode"
/>

data(){
    editor: null,
    toolbarConfig:{  //.. 工具栏配置 },
    editorConfig: {      // 编辑器配置（图片如配置颜色、字体、链接校验、上传图片等）
       MENU_CONF:{
             // 插入图片
             uploadImage: {
                  base64LimitSize: 1024 * 1024 * 10 // 10MB 小于该值就插入 base64 格式（而不    上传），默认为 0
              },
       }
    },
},

methods:{
    getEditorHtml(){
        let resHtml = this.editor.getHtml();  // 获取文章html结构（带有内联样式）
        console.log(resHtml )
    }
}

三、上传到七牛云

自定义上传图片到七牛云，上传成功后通过唯一路径访问图片，并将其插入显示在文章中。

（保持函数名与官网定义的一致即可）

示例代码：

data(){
        let that = this;
        return {
            // 文章编辑相关配置
            editor: null,
            toolbarConfig: {     // 菜单栏配置
                toolbarKeys:[
                    "uploadImage",  // 上传图片
                ]
            },
            editorConfig: {      // 编辑器配置（上传图片）
                MENU_CONF:{
                    // 图片上传
                    uploadImage: {
                        // 自定义上传图片到七牛云
                        async customUpload(file,insertFn) {
                            const isPic = file.type.split('/')[0] === 'image';
                            const isLt2M = file.size / 1024 / 1024 <= 10;

                            if (!isPic) {
                                that.$Message.error('只能上传图片噢~');
                            } else if (!isLt2M) {
                                that.$Message.error('上传图片大小不能超过 10MB!'); 
                            } else {
                                let url = '';
                                // 调用接口获取七牛token，后端给的
                                getUploadToken({}).then(res => {
                                    if (res.code == 200) {
                                        let qiniuToken = res.data.token;
                                        var key = null;
                                        let config = {
                                            useCdnDomain: true,   //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
                                            region: qiniu.region.z2     // 根据具体提示修改上传地区,当为 null 或 undefined 时，自动分析上传域名区域
                                        };
                                        let putExtra = {
                                            fname: "",  //文件原文件名
                                            params: {}, //用来放置自定义变量
                                            mimeType: null
                                        };
                                        var observable = qiniu.upload(file, key, qiniuToken, putExtra, config);
                                        observable.subscribe({
                                            complete: (result) => {
                                                // 利用七牛云注册成功后配置的地址 + 七牛云返回唯一的key，访问上传到七牛云的图片。
                                                url = `http://xxxxxxxxxxx/${result.key}`;
                                                insertFn(url,'走丢啦',url);   // 将图片插入编辑器显示
                                            }
                                        })
                                    } else {
                                        that.$Message.destroy();
                                        that.$Message.error(res.message);
                                    }
                                })
                            }
                        },
                    },
                }
            },
    }
}

Tips：

（1）在data函数 return 前，先用变量that 保存 this指向

data(){
    let that = this;
    return{
        //...
    }
}

（2）上传成功后，在回调函数中拿到访问图片唯一的key/hash值，拼接上后端给的协议和域名，就得到了这张图片的访问路径url。然后将其插入编辑器