代码如下:
我这边用的阿里OSS直传的,主要思路是获取截图对象,粘贴到指定div位置,获取文件流,将文件流赋值给clientUpload方法。
使用wx/qq 快捷指令就可以截图上传图片了。
<div class="layui-form-item"> <label class="layui-form-label leftLabel">支付图片</label> <div class="layui-input-inline rightDiv"> <div class="layui-upload-drag"> <div id="test10"> <i class="layui-icon"></i> <p>点击上传,或将文件拖拽到此处</p> </div> <div class="fileListArea" id="saleInfoFormFile"></div> </div> </div> </div>
//截屏 上传 const div = document.getElementById("saleInfoFormFile") // const img = document.getElementById("img") function handlePaste(e) { // 粘贴对象 if (e.clipboardData || e.originalEvent) { const clipboardData = (event.clipboardData || event.originalEvent.clipboardData); if (clipboardData.items) { let blob; for (let i = 0; i < clipboardData.items.length; i++) { if (clipboardData.items[i].type.indexOf('image') !== -1) { blob = clipboardData.items[i].getAsFile(); } } // // 粘贴数据 console.log(blob, 'blob'); clientUpload(blob, 1); // // 生成文件对象 // const filer = new FileReader() // // 将获取的粘贴数据转成 URL格式的字符串(base64编码) // filer.readAsDataURL(blob) // // 这个回调在 filer.readAsDataURL(blob) 的时候触发 // filer.onload = (e) => { // console.log(e, 'FileReader') // // 获取URL格式的字符串 Base64编码 // const base64 = e.target.result; // console.log(base64, 'base64') // // 通过img输出 // img.src = base64 //通过base64直接输出 // }; } } } div.addEventListener('paste', handlePaste); //OSS直传 function clientUpload(fileItem, fileLength) { var datetoday = util.getTodayDate(); var randomStr = "/" + new Date().getTime() + util.randomString(4); // 4位随机字符串 var extensionName = fileItem.name.substr(fileItem.name.lastIndexOf(".")); // 文件扩展名 var fileName = "doc/" + datetoday + randomStr + extensionName; // 文件名字(相对于根目录的路径 + 文件名) var fileType = '' if (extensionName === '.png' || extensionName === '.jpg' || extensionName === '.jpeg' || extensionName === '.gif') { fileType = 'image'; } else if (extensionName === '.txt' || extensionName === '.doc' || extensionName === '.xls' || extensionName === '.ppt' || extensionName === '.docx' || extensionName === '.xlsx' || extensionName === '.pptx ' || extensionName === '.pdf ') { fileType = 'text'; } client.multipartUpload(fileName, fileItem).then(function (result) { if (result.res.status === 200) { arr.push({ ossUrl: result.res.requestUrls[0].split("?")[0], type: fileType //文件类型 image 图片 text 文件 }); //arr.push(result.res.requestUrls[0].split("?")[0]) if (arr.length >= fileLength) { renderHtml(result.res.requestUrls[0].split("?")[0]); layer.close(loading) } } else { layer.msg('文件上传失败'); } }) }