nuxt/vue-quill-editor如何自定义图片上传

首先是html的代码,本人使用的element ui，使用的饿了么的上传插件

 v-loading="imageLoading"

  element-loading-text="请稍等，图片上传中">

 

      :content="article.content"

      ref="customQuillEditor"

      @change="onEditorChange($event)"

      @blur="onEditorBlur($event)"

      @focus="onEditorFocus($event)"

      @ready="onEditorReady($event)"

      v-quill:myQuillEditor="editorOption">

    style="display: none"

    class="avatar-uploader"

    action="http://127.0.0.1:8000/api/article"

    :show-file-list="false"

    :auto-upload="false"

    :on-change="imagesPreview">

   

   

定义一个toolbar常量

const toolbar= [

["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线

// ["blockquote", "code-block"], // 引用  代码块

  [{header:1 }, {header:2 }], // 1、2 级标题

// [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表

// [{ script: "sub" }, { script: "super" }], // 上标/下标

// [{ indent: "-1" }, { indent: "+1" }], // 缩进

// [{'direction': 'rtl'}],                        // 文本方向

// [{ size: ["small", false, "large", "huge"] }], // 字体大小

// [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题

// [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色

// [{ font: [] }], // 字体种类

// [{ align: [] }], // 对齐方式

// ["clean"], // 清除文本格式

  ["link", "image", "video"]// 链接、图片、视频

  ];

将配置注册进data中

editorOption: {

// some quill options

  modules: {

toolbar: {

container: toolbar,  // 工具栏

      handlers: {

'image':function (value) {

if (value) {

document.querySelector('#article-uploader').click();     //这里就是点击上传图片按钮会触发的事件，然后，你这里直接触发我们饿了么上传图片的按钮点击

          }else {

this.quill.format('image', false);

          }

}

}

}

}

}

在你的methods中将imagesPreview事件补全

imagesPreview(file){

//先进行图片的格式大小校验

let vm=this;

  const isJPG = file.type ==='image/jpeg' ||'image/jpg' ||'image/png' ||'image/gif';

  const isLt2M = file.size /1024 /1024 <2;

  if (!isJPG) {

this.$message.error('上传头像图片只能是jpg,png,gif格式!');

  }

else if (!isLt2M) {

this.$message.error('上传头像图片大小不能超过 2MB!');

  }else{

vm.imageLoading=true;

    const formData =new FormData();

    formData.append('images',file.raw);

    postAlbum(formData).then(res=>{

console.log(res.data.images);

    //获取quill实例

      let quill=vm.myQuillEditor;   

      // 获取光标所在位置

      let length = quill.getLength();

      // 插入图片  res.data.images为服务器返回的图片地址

      quill.insertEmbed(length, 'image', res.data.images);

      // 调整光标到最后

      quill.setSelection(length +1);

    //取消加载等待

      vm.imageLoading=false;

      console.log(vm.article.content);

    }).catch(error=>{

vm.$message.error('上传失败');

      vm.imageLoading=false;

    })

}

},