vue-quill-editor上传图片到服务器

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',  // 可选参数 图片上传方式  默认为posttoken: sessionStorage.token,  // 可选参数 如果需要token验证，假设你的token有存放在sessionStoragename: 'img',  // 可选参数 文件的参数名 默认为imgsize: 500,  // 可选参数   图片限制大小，单位为Kb, 1M = 1024Kbaccept: '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',  // 可选参数 图片上传方式  默认为posttoken: sessionStorage.token,  // 可选参数 如果需要token验证，假设你的token有存放在sessionStoragename: 'img',  // 可选参数 文件的参数名 默认为imgsize: 500,  // 可选参数   图片限制大小，单位为Kb, 1M = 1024Kbaccept: '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-uploadclass="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-editorv-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, // 文章idmoduleId: undefined, // 模块idtitle: 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

个人博客:博客

vue-quill-editor上传图片到服务器相关推荐

vue前后台分离上传图片到服务器
需求:前台vue实现,后台springboot实现,前台选择图片上传到后台指定目录,数据库中保存图片访问路径,前天通过url的访问路径显示图片: 实现代码前台: <el-input v-mode ...
富文本编辑器Quill(二)上传图片与视频
image与video在Quill formats中属于Embeds,要在富文本中插入图片或者视频需要使用insertEmbed api. insertEmbed insertEmbed(index: ...
现代化富文本编辑器 Quill Editor
介绍近期在弄富文本编辑器相关的内容,其中项目中使用了 Quill Editor(后面简称 Quill).Quill 自称是一个现代化强大的富文本编辑器,它与其它富文本编辑器(例如 UEditor)不 ...
Quill Editor
VUE-QUILL-EDITOR 该文章仅记录学习过程,不展示最终文件源码安装 quill-editor 在对应的目录打开 Terminal 执行以下命令: 安装 editor npm instal ...
储存quill与php,Quill自定义上传图片
Quill-Demo body { padding: 10px 30px; } #editor { min-height: 180px; } Quill自定义上传图片 /* 编辑器操作条选项 */ v ...
android上传本地图片到服务器上,Android使用post方式上传图片到服务器的方法
本文实例讲述了Android使用post方式上传图片到服务器的方法.分享给大家供大家参考,具体如下: /** * 上传文件到服务器类 * * @author tom */ public class U ...
linux 退出服务器_Vue实战091：Vue项目部署到nginx服务器
项目开发完成之后我们就需要将项目上线运行供用户访问,这时候我们就需要将项目部署到服务器上.对于Vue这种前端Web项目我们一般都部署在linux系统上,Linux常见的Web应用服务器有Apache. ...
JavaWeb上传图片到服务器，存储到数据库，并在页面显示
JavaWeb上传图片到服务器,存储到数据库,并在页面显示 Servlet @Overrideprotected void doPost(HttpServletRequest req, HttpSer ...
android bitmap上传服务器,Android 上传图片到服务器时将bitmap转换为byte[]最后转换为String...
1. //上传图片到服务器 Bitmap bitmap = ------;//得到图片 ByteArrayOutputStream out=new ByteArrayOutputStream(); t ...

vue-quill-editor上传图片到服务器

vue-quill-editor上传图片到服务器相关推荐

最新文章

热门文章