vue-quill-editor 编写文章的时候，插入图片过多，会返回错误，这是为什么？

Question

我用axios post方法将vue-quill-editor 里的 content直接传送到后端，图片会转化为base64。当图片过大的时候，后端就会返回错误

请问如何解决这个问题？

另外，有什么方法可以把base格式转化为url形式？网上一些文章看不大懂。

Answer 1

你可以使用官方提供的handlers重新覆盖点击image图标时的事件，用自己的事件，然后先把图片传给后台，然后再把后台返回的图片链接插入到编辑器里。大概过程是如图，不过我还没有调ajax。

Answer 2

 <button @click="imgClick" type="button" class="btn btn-success btn-sm">插入图片</button>

 uploadImg(e) {
            /**
            * 上传图片到服务器
             */
            var self = this;
            var fileInput = e.target;
            if (fileInput.files.length == 0) {
                return;
            }
            this.editor.focus();
            if (fileInput.files[0].size > 1024 * 1024 * 100) {
                alert('图片不能大于600KB');
            }
            var uploadImgData = new FormData();
            uploadImgData.append('imgFile', fileInput.files[0]);
            //  axios文件图片上传
            this.$http.post('/admin/article/uploadimg', uploadImgData).then((res) => {
                console.log(res);
                if (res.data.status == 1) {
                    self.editor.insertEmbed(self.editor.getSelection().index, 'image', res.data.uploadimgsrc);
                    //res.data.uploadimgsrc为上传成功后，返回图片的url地址
                } else {
                    alert('插入图片失败！');
                }
            }).catch((err) => {
                console.log(err);
            })

        },
         imgClick() {

            var imgFileIput = document.getElementById('uploadImg');
            //触发ajax上传函数
            imgFileIput.onchange = this.uploadImg;
            imgFileIput.click();
        }

你要获取quiil实例，在输入内容时，可以获得焦点的，然后插入 self.editor.insertEmbed(self.editor.getSelection().index, 'image', res.data.uploadimgsrc);

Answer 3

quill-image-extend-module 可以解决你的这个问题，或者自己拦截插曲图片的按钮事件来做服务器文件传输