quill-editor复制图片有base64转为地址上传
mounted() {
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( 或
projectDevelopApi.uploadFile(formData).then(
res => { // 调用的接口
if(res.code==200){
this.uploadSuccess(res)
}else{
this.$message.error(res.errMsg);
}
// 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
);
},
methods:{
// 上传图片成功的回调
uploadSuccess (res) {
// 获取富文本组件实例
let quill = this.$refs.myQuillEditor.quill
// 如果上传成功
if (res) {
// 获取光标所在位置
let length = quill.getSelection().index;
// 插入图片,res为服务器返回的图片链接地址
// quill.insertEmbed(length, 'image', res.result.fileUrl)
// quill.insertEmbed(length, 'image', "/tycy-doc-manage"+res.data.fileUrl)
quill.insertEmbed(length, 'image', globalAgent + res.data.fileUrl)// globalAgent为全局定义的常量
// 调整光标到最后
quill.setSelection(length + 1)
} else {
// 提示信息,需引入Message
this.$message.error('图片插入失败!')
}
},
}
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· AI与.NET技术实操系列(六):基于图像分类模型对图像进行分类
2021-05-26 echarts修改线条颜色的方法
2021-05-26 顶部导航栏点击数据不缓存