美文网首页
quill中将图片上传到服务器,编辑器中只插入地址

quill中将图片上传到服务器,编辑器中只插入地址

作者: aoners | 来源:发表于2018-12-26 15:15 被阅读0次

图片转base64存数据库基本用不到,我们先将图片上传到服务器,在编辑器中插入图片的链接。

toolbar = quill.getModule('toolbar');
toolbar.addHandler('image', () => {
  handlerImage();
});
function handlerImage(){
  var Imageinput = document.createElement('input');
  Imageinput.setAttribute('type', 'file');
  Imageinput.setAttribute('name', 'upload_file')
  Imageinput.setAttribute('accept','image/png, image/gif, image/jpeg');
  Imageinput.classList.add('ql-image');
  Imageinput.addEventListener('change', () => {
    var file = Imageinput.files[0];
    var formData = new FormData();
    formData.append('upload_file', file);
    if (Imageinput.files != null && Imageinput.files[0] != null) {
      $.ajax({
            url: '/upload',
            type: 'post',
            processData: false,
            contentType: false,
            data: formData,
            success: function (data) {
              var range = quill.getSelection(true);
              var index = range.index + range.length;
              quill.insertEmbed(range.index, 'image', data.src);
            }
      })
    }
  });
  Imageinput.click();
}

相关文章

网友评论

      本文标题:quill中将图片上传到服务器,编辑器中只插入地址

      本文链接:https://www.haomeiwen.com/subject/ebmhlqtx.html