vue 图片复制黏贴上传_# quill-image-extend-module :完成vue-quill-editor图片上传,复制粘贴,拖拽...
vue-quill-editor的加强模块,
功用:
供应图片上传到服务器的功用
复制插进去
拖拽插进去
显现上传进度
显现上传胜利或许失利
支撑与其他模块一同运用(比方调解图片大小)
Install
npm install quill-image-extend-module --save-dev
use
import {quillEditor, Quill} from 'vue-quill-editor'
import {container, ImageExtend} from 'quill-image-extend-module'
Quill.register('modules/ImageExtend', ImageExtend)
example
v-model="content"
ref="myQuillEditor"
:options="editorOption"
>
import {quillEditor, Quill} from 'vue-quill-editor'
import {container, ImageExtend} from 'quill-image-extend-module'
Quill.register('modules/ImageExtend', ImageExtend)
export default {
components: {quillEditor},
data() {
return {
content: '',
// 富文本框参数设置
editorOption: {
modules: {
ImageExtend: {
loading: true,
name: 'img',
action: updateUrl,
response: (res) => {
return res.info
}
},
toolbar: {
container: container,
handlers: {
'image': function () {
document.querySelector('.quill-image-input').click()
}
}
}
}
}
}
}
}
quill-image-extend-module 的一切可设置项
editorOption: {
modules: {
ImageExtend: {
loading: true, // 可选参数 是不是显现上传进度和提醒语
name: 'img', // 图片参数名
size: 3, // 可选参数 图片大小,单元为M,1M = 1024kb
action: updateUrl, // 服务器地点, 假如action为空,则采纳base64插进去图片
// response 为一个函数用来猎取服务器返回的详细图片地点
// 比方服务器返回{code: 200; data:{ url: 'baidu.com'}}
// 则 return res.data.url
response: (res) => {
return res.info
},
headers: (xhr) => {}, // 可选参数 设置要求头部
start: () => {}, // 可选参数 自定义最先上传触发事宜
end: () => {}, // 可选参数 自定义上传完毕触发的事宜,不管胜利或许失利
error: () => {}, // 可选参数 自定义收集毛病触发的事宜
change: (xhr, formData) => {} // 可选参数 挑选图片触发,也可用来设置头部,但比headers多了一个参数,可设置formData
},
toolbar: {
container: container, // container为工具栏,此次引入了悉数工具栏,也可自行设置
handlers: {
'image': function () { // 挟制本来的图片点击按钮事宜
document.querySelector('.quill-image-input').click()
}
}
}
}
}
注意事项 (matters need attention)
因为差别的用户的服务器返回的数据格式不尽相同
因而
在设置中,你必需以下操纵
// 你必需把返回的数据中所包括的图片地点 return 归去
respnse: (res) => {
return res.info // 这里切纪要return回你的图片地点
}
比方你的服务器返回的胜利数据为
{
code: 200,
starus: true,
result: {
img: 'http://placehold.it/100x100' // 服务器返回的数据中的图片的地点
}
}
那末你应该在参数中写为:
// 你必需把返回的数据中所包括的图片地点 return 归去
respnse: (res) => {
return res.result.img // 这里切纪要return回你的图片地点
}
与其他模块一同运用(以resize-module为例子)
v-model="content"
ref="myQuillEditor"
:options="editorOption"
>
import {quillEditor, Quill} from 'vue-quill-editor'
import {container, ImageExtend} from 'quill-image-extend-module'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/ImageExtend', ImageExtend)
// use resize module
Quill.register('modules/ImageResize', ImageResize)
export default {
components: {quillEditor},
data() {
return {
content: '',
// 富文本框参数设置
editorOption: {
modules: {
ImageResize: {},
ImageExtend: {
loading: true,
name: 'img',
size: 2, // 单元为M, 1M = 1024KB
action: updateUrl,
headers: (xhr) => {
},
response: (res) => {
return res.info
}
},
toolbar: {
container: container,
handlers: {
'image': function () {
document.querySelector('.quill-image-input').click()
}
}
}
}
}
}
}
}
vue 图片复制黏贴上传_# quill-image-extend-module :完成vue-quill-editor图片上传,复制粘贴,拖拽...相关推荐
- vue+element-ui实现富文本(含有图片粘贴拖拽上传)
vue+element-ui实现富文本(含有图片粘贴拖拽上传) Just For Share | 仅仅分享 首先需要安装 cnpm i vue-quill-editor -D 富文本编辑器 cnpm ...
- vueform表单文件上传_峰哥说技术系列-8.Spring Boot文件上传(Form表单和Ajax方式)
今日份主题 Spring Boot文件上传(Form表单和Ajax方式) 在Spring Boot中,和文件上传的主要和MultipartResolver接口有关,他有两个实现类 StandardSe ...
- vue 前端设置允许跨域_[web]记一次sanic+vue跨域问题
这两天在琢磨用sanic配合vue来写一个网站,果然马上就遇到问题了... Response to preflight request doesn't pass access control chec ...
- 使用vue实现自己音乐播放器仿网易云 移动端 (audio、播放、暂停、上一首、下一首、展示评论、音量控制、进度条拖拽)
最终实现成果展示 源码地址 在线演示地址 - 网抑云音乐 1.播放 暂停功能的实现 这是audio标签 <audio @timeupdate="updateTime" @ca ...
- java 百度网盘上传_使用pcs api往免费的百度网盘上传下载文件的方法
百度个人云盘空间大,完全免费,而且提供了pcs api供调用操作文件,在平时的项目里往里面保存一些文件是很实用的. 环境准备: 开通读写网盘的权限及获取access_token:http://blog ...
- 华为p20nfc怎么复制门禁卡_“碰一碰”即可开大门,华为手机上这个“逆天”功能,你用了吗?...
随着我们智能手机和移动支付在全国范围内的普及,小伙伴们出门必备的四大件,从"钱包.身份证.手机.钥匙",逐渐演变成了"手机+钥匙",如果再把钥匙放进手机,是不是 ...
- iphone复制不能全选_忘记Apple ID密码,如何直接在 iPhone 上更改?
最近有不少同学问我,如果忘记了 Apple ID 的密码,怎么能直接在 iPhone 上修改?别急,我现在就教你如果之前已经在 iPhone 上登录过你的账户,并且已经将 iPhone 设置为「受信任 ...
- 单片机数据在网页上显示_不务正业的Excel也玩地图,在地图上显示数据,好玩又简单...
Excel的尴尬 Excel越来越不象Excel,我们对Excel的第一映象就是制表.数据分析.常规操作自不必说,高级一点的无非就是透视图表.VBA等.不管再怎么高级,Excel似乎都是围绕数字在操作 ...
- 尚未提交线上版本_开发微信小程序如果显示尚未提交线上版本该怎么办
微信小程序审核通过发布后上传修改新内容的流程: 1.用微信小程序开发工具,打开项目,在开发工具里选择项目. 然后点击上传按钮,微信会提示你是否需要覆盖原来的版本,点击确定就行. 2.填写版本信息,然后 ...
- 使用vue加svg实现流程图代码_京东风格的移动端Vue组件库NutUI2.0来啦
移动端 Vue 组件库 NutUI 自发布以来受到了广泛的关注.据不完全统计,目前至少有30多个京东的 web 项目正在使用 NutUI . 经过一段时间紧锣密鼓的开发,近期,京东正式发布了 NutU ...
最新文章
- 计算机虚拟内存的设置
- Code128条形码
- java序列化与深度拷贝
- Spring Cloud 中 分布式事务解决方案 -- 阿里GTS的使用
- 一、Ajax跨域访问
- 如何查看linux服务器的白名单,linux服务器iptables防火墙白名单添加方式
- 中数据逆序输出_C语言 | 建立链表,输出各结点中的数据
- PPT中的文字怎么填充为图片?学会这个方法少走不少弯路
- 苏轼 天涯 青砚1989
- html页面上允许文字复制,网页上的文字无法复制?教你如何破除网页限制
- linux查看mono进程,linux mono环境
- 苹果设置播放html5视频,类似苹果官网,使用滚轴事件控制视频播放
- 计算机毕业设计django基于python学生考试成绩数据分析与可视化系统(源码+系统+mysql数据库+Lw文档)
- CC2541 BLE源码阅读知识积累之OSAL小结
- android12.0(S) 如何区分U盘和TF卡
- 什么是Java的反射机制
- 基于移动端的快递物流信息管理系统Uniapp
- CentOS 7中DHCP的介绍与搭建DHCP中继服务(理论+实践)
- Redis单点故障+红锁原理
- Mac装机必备之拯救歌荒,好用的五款Mac音乐播放器推荐
热门文章
- 通过as写一个简单的按键_自己写一个简单的二维魔方游戏
- 2020年10月国产数据库排行:GoldenDB跃升异军突起 PolarDB和GaussDB云化融合
- Oracle数据库常用十一大操作指令
- 大讲堂专访丨连接Oracle DBA与开发的桥梁:Oracle的redo与undo
- 华为云GuassDB(for Redis)发布全新版本推出:Lua脚本和SSL连接加密
- 一文带你 GNN 从入门到起飞,做一个饭盆最稳 GNN 饭人!
- 【华为云技术分享】玩转云上数据湖,解析Serverless 技术落地
- 一文搞懂*argv和**kwargs
- 【Python成长之路】词云图制作
- Vue源码中compiler部分逻辑梳理(内有彩蛋)