富文本 vue-quill-editor 图片上传

vue-quill-editor 原本的上传图片是将图片转为base64编码，当图片比较大时，会很卡。
所以要将图片上传到服务器，图片标签内只需要存储图片的网络地址就可以了。

具体实现

let param = new FormData(); //创建form对象
param.append('file',fileInput.files[0]); //通过append向form对象添加数据
axios.post('http://127.0.0.1:8081/upload',param).then(ret =>{
  var res=ret.data;
  if(res.code==1){
    Vue.prototype.$message({ message: res.msg||'上传成功！', type: 'success' });
  }else{
    Vue.prototype.$message({ message: res.msg, type: 'warning' });
  }                    
}).catch(function (error) { // 请求失败处理
    console.log(error);
    Vue.prototype.$message({ message: error, type: 'warning' });
});

完整代码：在quill.js中修改

BaseTheme.DEFAULTS = (0, _extend2.default)(true, {}, _theme2.default.DEFAULTS, {
  modules: {
    toolbar: {
      handlers: {
        formula: function formula() {
          this.quill.theme.tooltip.edit('formula');
        },
        image: function image() {
          var _this3 = this;

          var fileInput = this.container.querySelector('input.ql-image[type=file]');
          if (fileInput == null) {
            fileInput = document.createElement('input');
            fileInput.setAttribute('type', 'file');
            fileInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
            fileInput.classList.add('ql-image');
            fileInput.addEventListener('change', function () {
              if (fileInput.files != null && fileInput.files[0] != null) {
                let param = new FormData(); //创建form对象
                param.append('file',fileInput.files[0]); //通过append向form对象添加数据
                axios.post('http://127.0.0.1:8081/upload',param).then(ret =>{
                  var res=ret.data;
                  if(res.code==1){
                    var range = _this3.quill.getSelection(true);
                    _this3.quill.updateContents(new _quillDelta2.default().retain(range.index).delete(range.length).insert({ image: res.data.url }), _emitter2.default.sources.USER);
                    _this3.quill.setSelection(range.index + 1);
                    fileInput.value = "";
                    Vue.prototype.$message({ message: res.msg||'上传成功！', type: 'success' });
                  }else{
                    Vue.prototype.$message({ message: res.msg, type: 'warning' });
                  }                    
              }).catch(function (error) { // 请求失败处理
                  console.log(error);
                  Vue.prototype.$message({ message: error, type: 'warning' });
              });
                // var reader = new FileReader();
                // reader.onload = function (e) {
                //   var range = _this3.quill.getSelection(true);
                //   _this3.quill.updateContents(new _quillDelta2.default().retain(range.index).delete(range.length).insert({ image: e.target.result }), _emitter2.default.sources.USER);
                //   _this3.quill.setSelection(range.index + 1, _emitter2.default.sources.SILENT);
                //   fileInput.value = "";
                // };
                // reader.readAsDataURL(fileInput.files[0]);
              }
            });
            this.container.appendChild(fileInput);
          }
          fileInput.click();
        },
        video: function video() {
          this.quill.theme.tooltip.edit('video');
        }
      }
    }
  }
});