2018-01-13 发布
vue-quill-editor-upload : 实现vue-quill-editor上传图片到服务器
install
-
npm
npm install vue-quill-editor-upload --save
基本使用
<template>
<!-- bidirectional data binding（双向数据绑定） -->
<quill-editor v-model="content"
ref="myQuillEditor"
:options="editorOption">
</quill-editor>
</template>
<script>
import {quillRedefine} from 'vue-quill-editor-upload'
import {quillEditor} from 'vue-quill-editor'
export default {
components: {quillEditor, quillRedefine},
data () {
return {
content: '',
editorOption: {} // 必须初始化为对象 init to Object
}
},
created () {
this.editorOption = quillRedefine(
{
// 图片上传的设置
uploadConfig: {
action: '', // 必填参数 图片上传地址
// 必选参数 res是一个函数，函数接收的response为上传成功时服务器返回的数据
// 你必须把返回的数据中所包含的图片地址 return 回去
res: (respnse) => {
return respnse.info
},
name: 'img' // 图片上传参数名
}
}
)
console.log(this.editorOption)
}
}
</script>
use
You have to install vue-quill-editor first.
请确保您已安装了 vue-quill-editor
-
import
import {quillRedefine} from 'vue-quill-editor-upload'
quillRedefine是一个函数
quillRedefine 可接收的所有参数(all params)
{
// 图片上传的设置
uploadConfig: {
action: '', // 必填参数 图片上传地址
// 必选参数 res是一个函数，函数接收的response为上传成功时服务器返回的数据
// 你必须把返回的数据中所包含的图片地址 return 回去
res: (respnse) => {
return respnse.info
},
methods: 'POST', // 可选参数 图片上传方式 默认为post
token: sessionStorage.token, // 可选参数 如果需要token验证，假设你的token有存放在sessionStorage
name: 'img', // 可选参数 文件的参数名 默认为img
size: 500, // 可选参数 图片限制大小，单位为Kb, 1M = 1024Kb
accept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon', // 可选参数 可上传的图片格式
// start: function (){}
start: () => { }, // 可选参数 接收一个函数 开始上传数据时会触发
end: () => { }, // 可选参数 接收一个函数 上传数据完成（成功或者失败）时会触发
success: () => {}, // 可选参数 接收一个函数 上传数据成功时会触发
error: () => { } // 可选参数 接收一个函数 上传数据中断时会触发
},
// 以下所有设置都和vue-quill-editor本身所对应
placeholder: '', // 可选参数 富文本框内的提示语
theme: '', // 可选参数 富文本编辑器的风格
toolOptions: [], // 可选参数 选择工具栏的需要哪些功能 默认是全部
handlers: {} // 可选参数 重定义的事件，比如link等事件
}
- demo
first
you must to do: :options="editorOption" to bound Parameters
你必须绑定option :options="editorOption"
<template>
<!-- bidirectional data binding（双向数据绑定） -->
<quill-editor
:options="editorOption">
</quill-editor>
</template>
second
return editorOption
必须在return 中书写editorOPtion 并且设置默认为空对象
data () {
return {
content: '',
editorOption: {} // 必须初始化为对象 init to Object
}
}
three
init in created
在created生命周期中生成实际数据
created () {
this.editorOption = quillRedefine(
{
// 图片上传的设置
uploadConfig: {
action: '', // 必填参数 图片上传地址
// 必选参数 res是一个函数，函数接收的response为上传成功时服务器返回的数据
// 你必须把返回的数据中所包含的图片地址 return 回去
res: (respnse) => {
return respnse.info // 这里切记要return回你的图片地址
}
}
}
)
// console.log(this.editorOption)
}
注意事项 （matters need attention）
由于不同的用户的服务器返回的数据格式不尽相同
因此
在uploadConfig中，你必须如下操作
// 你必须把返回的数据中所包含的图片地址 return 回去
res: (respnse) => {
return respnse.info // 这里切记要return回你的图片地址
}
比如你的服务器返回的成功数据为
{
code: 200,
starus: true,
result: {
img: 'http://placehold.it/100x100' // 服务器返回的数据中的图片的地址
}
}
那么你应该在参数中写为：
// 你必须把返回的数据中所包含的图片地址 return 回去
res: (respnse) => {
return respnse.result.img // 这里切记要return回你的图片地址
}
example
完整用例
<template>
<!-- bidirectional data binding（双向数据绑定） -->
<quill-editor v-model="content"
ref="myQuillEditor"
:options="editorOption">
</quill-editor>
</template>
<script>
import {quillRedefine} from 'vue-quill-editor-upload'
import {quillEditor} from 'vue-quill-editor'
export default {
components: {quillEditor, quillRedefine},
data () {
return {
content: '',
editorOption: {} // 必须初始化为对象 init to Object
}
},
created () {
this.editorOption = quillRedefine(
{
// 图片上传的设置
uploadConfig: {
action: '', // 必填参数 图片上传地址
// 必选参数 res是一个函数，函数接收的response为上传成功时服务器返回的数据
// 你必须把返回的数据中所包含的图片地址 return 回去
res: (respnse) => {
return respnse.info
},
methods: 'POST', // 可选参数 图片上传方式 默认为post
token: sessionStorage.token, // 可选参数 如果需要token验证，假设你的token有存放在sessionStorage
name: 'img', // 可选参数 文件的参数名 默认为img
size: 500, // 可选参数 图片限制大小，单位为Kb, 1M = 1024Kb
accept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon', // 可选参数 可上传的图片格式
// start: function (){}
start: () => {
}, // 可选参数 接收一个函数 开始上传数据时会触发
end: () => {
}, // 可选参数 接收一个函数 上传数据完成（成功或者失败）时会触发
success: () => {
}, // 可选参数 接收一个函数 上传数据成功时会触发
error: () => {
} // 可选参数 接收一个函数 上传数据中断时会触发
},
// 以下所有设置都和vue-quill-editor本身所对应
placeholder: '', // 可选参数 富文本框内的提示语
theme: '', // 可选参数 富文本编辑器的风格
toolOptions: [], // 可选参数 选择工具栏的需要哪些功能 默认是全部
handlers: {} // 可选参数 重定义的事件，比如link等事件
}
)
console.log(this.editorOption)
}
}
</script>
上面的代码是我从别的地方搬过来的 下面的代码是我的 可以根据我的代码结合一块看
我认为最重要的一点就是母吆盲目的复制粘贴,因为开发人员写不出来就会急躁,故要将该考虑的都考虑到然后进行操作
<template>
<div id="articleAdd">
<div class="search">
<el-form label-width="80px">
<el-form-item label="标题">
<el-input clearable placeholder="请输入标题" v-model="form.title"></el-input>
</el-form-item>
<el-form-item label="作者">
<el-input clearable="clearable" placeholder="请输入作者" v-model="form.author"></el-input>
</el-form-item>
<el-form-item label="权重">
<el-input clearable="clearable" placeholder="请输入权重" v-model="form.sort"></el-input>
</el-form-item>
<el-form-item label="封面">
<el-upload class="upload-demo" :action="uploadUrl" :data="prefix" :file-list="coverBox"
:on-remove="handleRemove" :on-success="handleAvatarSuccess"
list-type="picture">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</el-form-item>
<el-form-item label="上传类型">
<el-radio-group v-model="upLoadType">
<el-radio :label="1">上传链接</el-radio>
<el-radio :label="2">上传文章</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
</div>
<!-- 图片上传组件辅助-->
<el-upload
class="avatar-uploader"
:action="uploadUrl" type="drag"
:data="prefix"
:show-file-list="false"
:on-success="uploadSuccess"
:on-error="uploadError"
:before-upload="beforeUpload">
</el-upload>
<el-form label-width="80px">
<!--富文本编辑器组件-->
<el-form-item label="上传地址" v-if="upLoadType == 1">
<el-input clearable placeholder="请输入上传地址" v-model="form.url"></el-input>
</el-form-item>
<el-form-item label="上传内容" v-if="upLoadType == 2" v-loading="uillUpdateImg">
<quill-editor
v-model="form.content"
ref="myQuillEditor"
:options="editorOption"
@focus="onEditorFocus($event)"
@change="onEditorChange($event)">
</quill-editor>
</el-form-item>
</el-form>
<el-button type="primary" class="subMit" @click="submitBtn"
:disabled="!(Boolean(form.title) && Boolean(form.author) && Boolean(form.cover) && Boolean(form.sort))">提交</el-button>
<!-- <div class="ql-container ql-snow">
<div class="ql-editor">
<div v-html="detailContent"></div>
</div>
</div> -->
</div>
</template>
<script>
import { subBtnFn, getInfoFn } from 'api/game/find/articleAdd';
import { toolbarOptions } from 'api/game/find/toolbarOptions'; // 工具栏配置
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
export default {
components: { quillEditor }, // 注册组件
data() {
return {
uillUpdateImg: false,
uploadUrl: undefined,
coverBox: [],
prefix: {prefix: 'contest'}, // 阿里云额外参数
upLoadType: 1, // 1为 URL 2为内容
form: {
id: undefined, // 文章id
moduleId: undefined, // 模块id
title: undefined, // 标题
author: undefined, // 作者
cover: undefined, // 封面
status: 1, // 状态 1：封禁 、2：正常
sort: undefined, // 权重
url: undefined, // 链接地址
content: undefined, // 正文内容
},
editorOption: {
theme: 'snow', // or 'bubble'
modules: {
toolbar: {
container: toolbarOptions, // 工具栏
handlers: {
'image': function (value) {
if (value) {
// 触发input框选择图片文件
document.querySelector('.avatar-uploader input').click()
} else {
this.quill.format('image', false);
}
}
}
}
}
},
}
},
created () {
this.uploadUrl = this.defaultUploadUrl;
if (this.$route.query){ // 判断是否有值
this.form.moduleId = this.$route.query.moduleId;
if (this.$route.query.id) { // 判断是否为编辑
this.form.id = this.$route.query.id;
this.getData();
}
}
},
methods: {
getData() {
this.coverBox = []
getInfoFn({ id: this.form.id }).then(res=>{
if (res.code == 0) {
this.form = {...res.data};
if (res.data.url) { // 1为 URL 2为内容
this.upLoadType = 1;
} else {
this.upLoadType = 2;
}
this.coverBox.push({url: res.data.cover, name: res.data.cover})
} else {
this.$message.error( res.message );
}
})
},
// 获得焦点事件
onEditorFocus(e){ this.lenIndex = e.getSelection().index; },
// 内容改变事件
onEditorChange(e){ this.lenIndex = e.quill.getSelection().index; },
escapeStringHTML(str) { // 转码
str = str.replace(/</g,'<');
str = str.replace(/>/g,'>');
return str;
},
/* handleSingleSuccess (res, file) { // res为图片服务器返回的数据
let quill = this.$refs.myQuillEditor.quill; // 获取富文本组件实例
if (res.code == '0') {
// 插入图片 res.info为服务器返回的图片地址
quill.insertEmbed(this.lenIndex, 'image', res.data)
// 调整光标到最后
quill.setSelection(this.lenIndex + 1)
} else {
this.$message.error('图片插入失败')
}
this.quillUpdateImg = false; // loading动画消失
}, */
// 富文本图片上传前
beforeUpload() { this.quillUpdateImg = true; },
uploadSuccess(res, file) { // res为图片服务器返回的数据
let quill = this.$refs.myQuillEditor.quill;
if (res.code == 0) {
let length = quill.getSelection().index; // 获取光标所在位置
quill.insertEmbed(length, 'image', res.data); // 插入图片 res.info为服务器返回的图片地址
quill.setSelection(length + 1); // 调整光标到最后
} else {
this.$message.error('图片插入失败')
}
this.quillUpdateImg = false; // loading动画消失
},
// 富文本图片上传失败
uploadError() {
// loading动画消失
this.quillUpdateImg = false;
this.$message.error('图片插入失败');
},
submitBtn() {
if (this.upLoadType == 1) { // 1为 URL 2为内容
this.form.content = undefined;
if (!this.form.url) {
this.$message.error({ message: '请填写您要上传的数据!' });
return;
}
} else {
this.form.url = undefined;
if (!this.form.content) {
this.$message.error({ message: '请填写您要上传的数据!' });
return;
}
}
subBtnFn({...this.form}).then(res => {
if (res.code == 0) {
this.$message({ showClose: true, message: '数据添加成功,即将进行跳转', type: 'success' });
setTimeout(() => {
this.$router.push({
path: '/find/articleManage',
query:{
copywritingId: this.form.moduleId
}
});
}, 1500);
}
})
},
// 封面上传
handleAvatarSuccess(res, file) { this.form.cover = res.data; },
handleRemove (file, fileList) { this.edit.cover = ''; },
},
}
</script>
<style>
#articleAdd {
margin: 30px;
}
#articleAdd .avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
#articleAdd .avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
#articleAdd .avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
#articleAdd .avatar {
width: 178px;
height: 178px;
display: block;
}
#articleAdd .subMit {
/* float: right; */
margin: 20px 0;
}
</style>
我直接将代码贴过来了, template中的代码应该可以看懂,style中的就不要说了,script中的注释我也写了,如果还是看不懂 可以加我 QQ: 2489757828
个人博客:李大玄
