Vue 富文本编辑器:vue-quill-editor粘贴图片上传服务器
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
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
);
}
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)