使用wx/qq/等app在项目里截屏上传图片

代码如下：

我这边用的阿里OSS直传的，主要思路是获取截图对象，粘贴到指定div位置，获取文件流，将文件流赋值给clientUpload方法。

使用wx/qq 快捷指令就可以截图上传图片了。

?

1 2 3 4 5 6 7 8 9 10 11 12

<div class="layui-form-item">   <label class="layui-form-label leftLabel">支付图片</label>   <div class="layui-input-inline rightDiv">     <div class="layui-upload-drag" style="padding: 10px;width: 100%;">       <div id="test10">         <i class="layui-icon" style="font-size: 30px;"></i>         <p>点击上传，或将文件拖拽到此处</p>       </div>       <div class="fileListArea" id="saleInfoFormFile"></div>     </div>   </div> </div>

　　

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68

//截屏 上传   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('文件上传失败');       }     })   }