美文网首页
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