业务需求
在评论输入框粘贴图片后实现图片自动上传
实现思路
- 用富文本编辑器实现
- 监听输入框的粘贴事件
考虑到项目其他地方没有富文本的需求，引入富文本增大代码大小，因此选择js方法paste粘贴事件
paste事件
paste： 在 发生 粘贴 操作 时 触发
绑定的元素不一定是input，普通的div也是可以绑定的，如果是给document绑定了，就相当于全局了，任何时候的粘贴操作都会触发
事件对象
操作的数据放在clipboardData对象中的，在ie中这个对象通过window.clipboardData来访问，在其它浏览器中则通过事件处理函数的参数来访问。
获取事件对象：
handlePaste(event) {
var clipboardData = event.clipboardData || window.clipboardData
}粘贴事件提供了一个clipboardData的属性，如果该属性有items属性，那么就可以查看items中是否有图片类型的数据了。
clipboardData介绍
介绍一下clipboardData对象，它实际上是一个DataTransfer类型的对象，DataTransfer 是拖动产生的一个对象，但实际上粘贴事件也是它。
clipboardData的属性介绍：
属性 | 类型 | 说明 |
dropEffect | String | 默认是 none |
effectAllowed | String | 默认是 uninitialized |
files | FileList | 粘贴操作为空List |
items | DataTransferItemList | 剪切板中的各项数据 |
types | Array | 剪切板中的数据类型 |
items介绍
items是一个DataTransferItemList对象，自然里面都是DataTransferItem类型的数据了。
属性
items的DataTransferItem有两个属性kind和type:
属性 | 说明 |
kind | 一般为string或者file |
type | 具体的数据类型，例如具体是哪种类型字符串或者哪种类型的文件，即MIME-Type |
方法
方法 | 参数 | 说明 |
getAsFile | 空 | 如果kind是file，可以用该方法获取到文件 |
getAsString | 回调函数 | 如果kind是string，可以用该方法获取到字符串，字符串需要用回调函数得到，回调函数的第一个参数就是剪切板中的字符串 |
types介绍
types常见的值：text/plain, text/html, files
值 | 说明 |
text/plain | 普通字符串 |
text/html | 带有样式的html |
files | 文件(例如剪切板中的数据) |
Demo
methods: {
// 粘贴监听图片上传
handlePaste (event) {
// console.log(event)
var clipboardData = event.clipboardData || window.clipboardData
console.log(clipboardData) // 查看clipboardData
const items = clipboardData.items
const types = clipboardData.types
let file = null
var text = clipboardData.getData('text/plain')
// 搜索剪切板items
for (let i = 0; i < items.length; i++) {
console.log(items[i])
if (items[i].type.indexOf('image') !== -1) {
file = items[i].getAsFile()
// break
} else {
// clipboardData.clearData(items[i].type)
var str = clipboardData.getData(items[i].type)
console.log(str)
}
}
// 搜索剪切板types
for (let i = 0; i < types.length; i++) {
console.log(types[i])
}
if (!file) {
return
}
this.isPasteImg = true
// 此时file就是我们的剪切板中的图片对象
let form = new FormData()
form.append('file', file)
let that = this
api.commonInterface(
that.uploadUrl,
'Post',
function (res) {
that.uploadSuccess(res.data, file, text)
},
form
)
},clipboardData对象有三个方法：getData()、 setData() 和 clearData()。在使用getData或setData时，要指定文档类型，ie中使用text或URL，其它浏览使用mime类型（text/plain）
setData()和clearData()方法只有在ie中才能设置剪贴板数据，在其它浏览器中设置后剪贴板数据依然无效
