首先是html的代码,本人使用的element ui，使用的饿了么的上传插件
<div
v-loading="imageLoading"
element-loading-text="请稍等，图片上传中">
<div class="quill-editor"
:content="article.content"
ref="customQuillEditor"
@change="onEditorChange($event)"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)"
v-quill:myQuillEditor="editorOption">
style="display: none"
class="avatar-uploader"
action="http://127.0.0.1:8000/api/article"
:show-file-list="false"
:auto-upload="false"
:on-change="imagesPreview">
<img v-if="images" :src="images" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon" id="article-uploader">
</div>
定义一个toolbar常量
const toolbar= [
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
// ["blockquote", "code-block"], // 引用 代码块
[{header:1 }, {header:2 }], // 1、2 级标题
// [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
// [{ script: "sub" }, { script: "super" }], // 上标/下标
// [{ indent: "-1" }, { indent: "+1" }], // 缩进
// [{'direction': 'rtl'}], // 文本方向
// [{ size: ["small", false, "large", "huge"] }], // 字体大小
// [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
// [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
// [{ font: [] }], // 字体种类
// [{ align: [] }], // 对齐方式
// ["clean"], // 清除文本格式
["link", "image", "video"]// 链接、图片、视频
];
将配置注册进data中
editorOption: {
// some quill options
modules: {
toolbar: {
container: toolbar, // 工具栏
handlers: {
'image':function (value) {
if (value) {
document.querySelector('#article-uploader').click(); //这里就是点击上传图片按钮会触发的事件，然后，你这里直接触发我们饿了么上传图片的按钮点击
}else {
this.quill.format('image', false);
}
}
}
}
}
}
在你的methods中将imagesPreview事件补全
imagesPreview(file){
//先进行图片的格式大小校验
let vm=this;
const isJPG = file.type ==='image/jpeg' ||'image/jpg' ||'image/png' ||'image/gif';
const isLt2M = file.size /1024 /1024 <2;
if (!isJPG) {
this.$message.error('上传头像图片只能是jpg,png,gif格式!');
}
else if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}else{
vm.imageLoading=true;
const formData =new FormData();
formData.append('images',file.raw);
postAlbum(formData).then(res=>{
console.log(res.data.images);
//获取quill实例
let quill=vm.myQuillEditor;
// 获取光标所在位置
let length = quill.getLength();
// 插入图片 res.data.images为服务器返回的图片地址
quill.insertEmbed(length, 'image', res.data.images);
// 调整光标到最后
quill.setSelection(length +1);
//取消加载等待
vm.imageLoading=false;
console.log(vm.article.content);
}).catch(error=>{
vm.$message.error('上传失败');
vm.imageLoading=false;
})
}
},
网友评论