wangEditor富文本编辑器（第三章：图片上传）

目录

前言

一、思路？

1.修改上传方式

二、全部流程

总结

---

前言

接上一章字数限制做好后，这一章要解决一下图片上传得问题，官方中得图片是转成了base格式，但是现实情况下就是要调用后端接口上传照片，所以我们这章主要是修改图片上传得默认接口~。

---

一、思路

1.修改上传方式

默认是有上传图片的，并且是两个选项，如下：

 这里我们只需要一个上传图片，所以要先隐藏这个下拉，点击图片菜单后直接弹出图片选择，如下：

在editor.create()之前写下面这句：

  // 隐藏“网络图片”tab
      editor.config.showLinkImg = false;

二、全部流程

注释很详细了，代码如下：

 // 上传图片配置

      editor.config.uploadImgServer = "/upload"; // 设置上传图片的地址

      editor.config.showLinkImg = false; // 隐藏“网络图片”tab

      editor.config.uploadImgMaxLength = 1; //上传图片最大数
      editor.config.uploadImgMaxSize = 2 * 1024 * 1024; //上传图片的最大值
      //封装上传图片方法
      editor.config.customUploadImg = function(files, insert) {
        // files 是 input 中选中的文件列表
        // insert 是获取图片 url 后，插入到编辑器的方法
        // 上传代码返回结果之后，将图片插入到编辑器中
        // insert(imgUrl)
        //imgsNum： 已存在的图片  uploadImgNum : 上传的图片
        if (that.imgsNum + that.uploadImgsNum > 10) {
          that.$alert("已上传图片超过最大的数量限制!");
          return;
        }
        let formData = new FormData(); //创建格式
        formData.append("type", 1); //这里可以通过类型来区分，如 1 是图片，2是文档
        formData.append("file", files[0]); //添加属性
        console.log("图片属性", formData);
        //这是调用封装的接口
        fileUpload(formData).then(res => {
          that.uploadImgsNum++;
          let imgurl = res.data.newName;
          let url = "http://XXXXX:XXXX" + imgurl; //这里是上传的地址+图片名字
          console.log(res, imgurl, url, "返回的图片");
          insert(url); //插入地址
          // insert(res)
        });
        console.log(files, insert);
      };

      editor.create();

---

总结

以上就是今天要讲的内容，本文仅仅简单介绍了自定义图片上传得路径配置，很简单啦，动手起来把。

当然除了这种方法还有另一种直接修改上传图片的接口也可以，这样即可以上传本地图片，又可以上传网络图片，这种方法就下次再说吧~

上一章：wangEditor富文本编辑器（第二章：字数限制）

下一章：wangEditor富文本编辑器（第四章：自定义首行缩进菜单）