Vue 富文本编辑器:vue-quill-editor粘贴图片上传服务器
粘贴图片:vue-quill-editor复制图片实际上会以 base64 形式的进行一个上传,写进数据库后会导致数据一些加载问题
**解决方法:**将复制的图片先上传到服务器,再将服务器返回的图片链接地址插入img标签中
优化:代码如下:
mounted() {
this.editor = this.$refs.myQuillEditor.quill;
addQuillTitle();
let quill = this.$refs.myQuillEditor.quill;
quill.root.addEventListener(
"paste",
(evt) => {
if (
evt.clipboardData &&
evt.clipboardData.files &&
evt.clipboardData.files.length
) {
evt.preventDefault();
[].forEach.call(evt.clipboardData.files, (file) => {
if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
return;
}
const formData = new FormData();
formData.append("file", file);
this.$axios.post(`${this.$Tools.Conts.domain}uploads`, formData).then(
res => {
if (res.data.code == 0) {
console.log(res.data.data.src)
// window.open(res.data.data.src)
let length = quill.getSelection().index; //光标位置
// 插入图片地址
quill.insertEmbed(length, "image", res.data.data.src);
// 光标后移一位
quill.setSelection(length + 1);
} else {
console.log(res.data)
this.$message({
message: res.data.message,
type: 'warning'
});
}
})
});
}
},
false
);
}