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
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
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> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)