复制黏贴直接上传图片

需求复制黏贴直接上传图片

上传图片的接口就不写了，下面的html demo中 file 和图片的base64都能拿到直接用直接上传就行了，需要重命名文件名，不然上传的文件名都是一样的

`上传的时候 renameFile 代替file就行啦

// 名称取当前时间戳
const type = file.type.split(‘/’);
const renameFile = new File([file], new Date().getTime() + ‘.’ + type[1], {
type: file.type
});`

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片黏贴上传</title><style>#content {margin:0 auto;width:600px;height:600px;border:1px solid black;}</style>
</head>
<body><!-- 内容区域 --><div id="content" contenteditable="true"></div>
<script>var content = document.getElementById("content")// 添加监听事件paste 黏贴content.addEventListener('paste', function (e){// 黏贴版没有数据,则直接结束if (!(e.clipboardData && e.clipboardData.items)) {return;}// 黏贴版数据项,是个数组var data = e.clipboardData.items;if (data && data.length) {var item = data[0];// 判断是文本还是图片文件if (item.kind == 'string') {// // 获取文本内容// var text = event.clipboardData.getData('Text');// // 设置到content中// content.innerHTML = text;} else if (item.kind == 'file') {// 获取文件var file = item.getAsFile();// file 就是我们输入框选择文件所获取的文件内容// 图片插入div中var reader = new FileReader();reader.readAsDataURL(file);// 名称取当前时间戳const type = file.type.split('/');const renameFile = new File([file], new Date().getTime() + '.' + type[1], {type: file.type});params.file = renameFile;upload(that.params);reader.onload = function (event) {var img = document.createElement("img");// event.target.result 输出 图片base64img.src = event.target.result;content.appendChild(img);}}}e.preventDefault();});
</script>
</body>
</html>

params:参数

let params= {action: process.env.UPLOADFILE_URL + '/uploadFile', // 上传文件路径filename: 'file',data: undefined,headers: {},}

接口上传 upload（content）

 const formData = new FormData();content.file && formData.append('file', content.file);if (content.otherData) {content.otherData.forEach((item) => {formData.append(item.key, encodeURI(item.value));});}axios.post(content.action, formData, {params: content.params,headers: { 'Content-Type': 'multipart/form-data', ...content.headers }}).then((res) => {if (res.data.code === 0 && res.data.result) {invokSuccess(res.data, content.file);} else {throw new Error(res.data.msg);}}).catch((error) => {const msg = (error || {}).message || error;content.onError(msg);});

复制黏贴直接上传图片相关推荐

关于git bush 中不能复制黏贴的问题
如果你是一个新手的话,在你使用个git的过程中,你会发现git 竟然不能复制黏贴,这简直是完全不能忍受的事,复制黏贴可以大大的节省了我们敲代码的时间,特别是在github中clone别人的仓库到本地, ...
怎样使破解网页的禁止复制黏贴
有些网页无法复制黏贴.最好的解决的方法是用Firefox. 然后: 输入 about:config 查找 dom.event.clipboardevents.enabled 双击把值改成 " ...
（转）xshell无法在vim中复制黏贴
ssh xshell 连接在vim中无法用 ctrl+insert 复制黏贴修改.vimrcset mouse=cvi的三种模式:命令模式,插入模式,可视模式.鼠标可以启动于各种模式中: The mo ...
关于编码问题的复制黏贴
复制了一段乱码,比如"a:2:{s:4:"name";s:27:"hellaaaaaaa################";s:7:"isa ...
IDEA之非常复制黏贴
有时候我们需要同时复制好几个不同文件的多处到某一个文件里面,只能一个一个的复制黏贴,因为当前复制的内容会覆盖前一次复制的内容.解决如下: 我们可以再不同的文件中连续的复制,直接Ctr+V能够黏贴当前的 ...
【软件教程】解决kali无法和windows实现复制黏贴互通
一.kali和windows的ctrl+C 和 ctrl+V失效 1.失效原因:kali的VMware Tool工具失效了 2.解决办法:安装VMare Tool工具,在kali的终端输入 apt-g ...
H5页面屏蔽用户长按复制黏贴
H5页面屏蔽用户长按复制黏贴防止文字复制黏贴 *:not(input){ -webkit-touch-callout: none; /系统默认菜单被禁用/ -webkit-user-select: ...
macos复制粘贴快捷键快速_Mac怎么修改复制黏贴快捷键？Mac修改复制黏贴快捷键的方法...
苹果电脑和市场上最多的Windows电脑是有很大的不同的,特别是对苹果电脑的新用户,往往会无法得心应手,像很多快捷键就会与 Windows的电脑完全不一样,为了得心应手,那么苹果电脑也是可以进行习惯性 ...
MobaXterm常用设置修改复制黏贴快捷键加开启保持ssh连接设置
文章目录 1.复制黏贴快捷键 2.设置保持ssh连接 MobaXterm是很专业的linux运维工具,除了可以shell连接外也在一个软件中集成了ftp. 不过用之前建议修改两个地方 1.复制黏贴快捷 ...

复制黏贴直接上传图片

需求复制黏贴直接上传图片

复制黏贴直接上传图片相关推荐

最新文章

热门文章

复制黏贴直接上传图片

需求 复制黏贴直接上传图片

复制黏贴直接上传图片相关推荐

最新文章

热门文章

需求复制黏贴直接上传图片