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

代码如下：

我这边用的阿里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" 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>

　　

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