君暮雪 发表于 2023-3-14 18:21:21

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

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

    <label >支付图片</label>
   
      
      
          <i></i>
          <p>点击上传,或将文件拖拽到此处</p>
      
      
      
   
  
    //截屏 上传
    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.type.indexOf('image') !== -1) {
            blob = clipboardData.items.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.split("?"),
            type: fileType //文件类型 image 图片 text 文件
          });
          //arr.push(result.res.requestUrls.split("?"))
          if (arr.length >= fileLength) {
            renderHtml(result.res.requestUrls.split("?"));
            layer.close(loading)
          }
      } else {
          layer.msg('文件上传失败');
      }
      })
    }  



 

来源:https://www.cnblogs.com/yxg2852/p/17214479.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!
页: [1]
查看完整版本: 使用wx/qq/等app在项目里截屏上传图片