<template>
<div>
<quill-editor v-model="content" ref="myQuillEditor"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)"
@change="onEditorChange($event)">
</quill-editor>
<div style="height:65px;border: 1px snow thick;">
<div class="demo-upload-list" v-for="item in uploadList">
<template v-if="item.status === 'finished'">
<img :src="'http://'+item.response.data.picName">
<div class="demo-upload-list-cover">
<Icon type="ios-eye-outline" @click.native="handleView(item.response.data.picName)"></Icon>
<Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
</div>
</template>
<template v-else>
<Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
</template>
</div>
</div>
<Upload :show-upload-list="false"
style="display: none;"
ref="up"
name="upfile"
:format="accept"
:max-size="maxsize"
multiple type="drag"
:on-success="handleSuccess"
:action="imgUrl" >
<input id="upload" />
</Upload>
<Modal title="查看图片" v-model="visible">
<img :src="src" v-if="visible" style="width: 60%">
</Modal>
</div>
</template>
<style>
.info {
border-radius: 10px;
line-height: 20px;
padding: 10px;
margin: 10px;
background-color: #ffffff;
}
</style>
<script>
import { quillEditor } from 'vue-quill-editor'
import $ from 'jquery'
export default {
components: {
quillEditor
},
data() {
return {
visible: false,
src: '',
uploadList: [],
content: '<h2>I am Example</h2>',
}
},
props:{
imgUrl:{
type:String,
default:'http://localhost:1111/upload/up'
},
accept:{
type:Array
},
maxsize:{
type:Number,
default:20480
}
},
computed: {
editor() {
return this.$refs.myQuillEditor.quill
},
},
mounted() {
this.uploadList = this.$refs.up.fileList;
//给img video按键绑定事件
this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', this.imgClick)
this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('video', this.imgClick)
},
methods: {
//点击图片触发事件
imgClick() {
$('#upload').click()
},
//查看图片
handleView(name) {
this.src = 'http://' + name;
this.visible = true;
},
//删除图片
handleRemove(file) {
// 从 upload 实例删除数据
const fileList = this.$refs.up.fileList;
this.$refs.up.fileList.splice(fileList.indexOf(file), 1);
},
//成功回调
handleSuccess(response, file, fileList) {
console.log("返回图片")
if(response.code == 500) {
this.$Message.error('上传失败!')
} else {
this.$Message.success('上传成功!')
}
console.log(response)
console.log(fileList)
console.log(file)
},
//Quill
onEditorBlur(editor) {
console.log('editor blur!', editor)
},
onEditorFocus(editor) {
console.log('editor focus!', editor)
},
onEditorReady(editor) {
console.log('editor ready!', editor)
},
onEditorChange({editor,html,text}) {
console.log('editor change!', editor)
//this.content = html
console.log("content ",this.content)
console.log("text ",text)
this.$emit('toapp',html)
}
}
};
</script>
<style scoped>
.demo-upload-list {
display: inline-block;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
border: 1px solid transparent;
border-radius: 4px;
overflow: hidden;
background: #fff;
position: relative;
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
margin-right: 4px;
}
.demo-upload-list img {
width: 100%;
height: 100%;
}
.demo-upload-list:hover .demo-upload-list-cover {
display: block;
}
.demo-upload-list-cover {
color: #fff;
font-size: 16px;
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, .6);
}
</style>
vuequillEditor上传图片
最新推荐文章于 2024-08-08 08:28:32 发布