vue 剪切或复制,如何获取剪切板的信息,图片,并展现?
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue

·
思路:
- 触发区域选择,在选区加上监听方法
- 获取剪切板的信息
- 展现在页面,或者作为参数在其他接口中使用
代码如下:
<template>
<div class="text-correct">
<div class="box" ref="showImg">
<img v-if="imgUrl" :src="imgUrl" class="fit-center">
</div>
</div>
</template>
<script>
import api from '../api'
export default {
mounted() {
const self = this
this.$refs.showImg.addEventListener('paste', function (event) {
let items = event.clipboardData && event.clipboardData.items
let file = null
if (items && items.length) {
// 检索剪切板items
for (let i = 0; i < items.length; i++) {
if (items[i].type.indexOf('image') !== -1) {
//这里拿到了图片的流文件
file = items[i].getAsFile()
var formData = new FormData()
formData.append('file', file)
//借助FormData对象将数据传给你的api
api.yourApi(formData).then((e) => {
self.text = e.data.result.join('\n')
})
break
}
}
}
// 预览图片
const reader = new FileReader()
reader.onload = function (event) {
self.imgUrl = event.target.result
}
reader.readAsDataURL(file)
})
}
}
</script>
1,在元素上绑定一个paste黏贴事件,在黏贴版找到类型为图片的item,用getAsFile()方法,变成file对象。
2,如果要展示图片,用FileReader()从file对象中读取数据,直接拿base64地址展示;
3,如果要将拿到的剪切板内容传给某个API存储或调用,借助FormData对象将数据传给你的api




vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
9e887079
[skip ci] 1 年前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前

新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。
更多推荐
所有评论(0)