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

DW14687

已于 2022-08-02 09:20:36 修改

阅读量9.7k

点赞数 7

分类专栏： vue中使用的一些实用插件文章标签： javascript 开发语言 ecmascript

于 2022-06-15 17:26:10 首次发布

本文链接：https://blog.csdn.net/DW14687/article/details/125216671

版权

vue中使用的一些实用插件专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前言

接上一章字数限制做好后，这一章要解决一下图片上传得问题，官方中得图片是转成了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();