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

發現

代码如下：
我这边用的阿里OSS直传的，主要思路是获取截图对象，粘贴到指定div位置，获取文件流，将文件流赋值给clientUpload方法。
使用wx/qq 快捷指令就可以截图上传图片了。

1.   
2.     <label >支付图片</label>
3.    
4.       
5.         
6.           <i  ></i>
7.           <p>点击上传，或将文件拖拽到此处</p>
8.         
9.         
10.       
11.    
12.   

复制代码

　　

1.     //截屏 上传
2.     const div = document.getElementById("saleInfoFormFile")
3.     // const img = document.getElementById("img")
4.     function handlePaste(e) {
5.       // 粘贴对象
6.       if (e.clipboardData || e.originalEvent) {
7.         const clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
8.         if (clipboardData.items) {
9.           let blob;
10.           for (let i = 0; i < clipboardData.items.length; i++) {
11.             if (clipboardData.items[i].type.indexOf('image') !== -1) {
12.               blob = clipboardData.items[i].getAsFile();
13.             }
14.           }
15.           // // 粘贴数据
16.           console.log(blob, 'blob');
17.           clientUpload(blob, 1);
19.           // // 生成文件对象
20.           // const filer = new FileReader()
22.           // // 将获取的粘贴数据转成 URL格式的字符串（base64编码）
23.           // filer.readAsDataURL(blob)
25.           // // 这个回调在 filer.readAsDataURL(blob) 的时候触发
26.           // filer.onload = (e) => {
27.           //   console.log(e, 'FileReader')
28.           //   // 获取URL格式的字符串 Base64编码
29.           //   const base64 = e.target.result;
30.           //   console.log(base64, 'base64')
31.           //   // 通过img输出
32.           //   img.src = base64   //通过base64直接输出
33.           // };
35.         }
36.       }
37.     }
38.     div.addEventListener('paste', handlePaste);
40.   //OSS直传
41.     function clientUpload(fileItem, fileLength) {
42.       var datetoday = util.getTodayDate();
43.       var randomStr = "/" + new Date().getTime() + util.randomString(4); //  4位随机字符串
44.       var extensionName = fileItem.name.substr(fileItem.name.lastIndexOf(".")); // 文件扩展名
45.       var fileName = "doc/" + datetoday + randomStr + extensionName; // 文件名字（相对于根目录的路径 + 文件名）
46.       var fileType = ''
47.       if (extensionName === '.png' || extensionName === '.jpg' || extensionName === '.jpeg' || extensionName === '.gif') {
48.         fileType = 'image';
49.       } else if (extensionName === '.txt' || extensionName === '.doc' || extensionName === '.xls' || extensionName === '.ppt' || extensionName === '.docx' || extensionName === '.xlsx' || extensionName === '.pptx ' || extensionName === '.pdf ') {
50.         fileType = 'text';
51.       }
53.       client.multipartUpload(fileName, fileItem).then(function (result) {
54.         if (result.res.status === 200) {
55.           arr.push({
56.             ossUrl: result.res.requestUrls[0].split("?")[0],
57.             type: fileType //文件类型 image 图片 text 文件
58.           });
59.           //arr.push(result.res.requestUrls[0].split("?")[0])
60.           if (arr.length >= fileLength) {
61.             renderHtml(result.res.requestUrls[0].split("?")[0]);
62.             layer.close(loading)
63.           }
64.         } else {
65.           layer.msg('文件上传失败');
66.         }
67.       })
68.     }

复制代码

　　

 

来源:https://www.cnblogs.com/yxg2852/p/17214479.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！