使用wx/qq/等app在專案里截屏上傳圖片

代碼如下：

我這邊用的阿里OSS直傳的，主要思路是獲取截圖物件，粘貼到指定div位置，獲取檔案流，將檔案流賦值給clientUpload方法，

使用wx/qq 快捷指令就可以截圖上傳圖片了，

  <div >
    <label >支付圖片</label>
    <div >
      <div  style="padding: 10px;width: 100%;">
        <div id="test10">
          <i  style="font-size: 30px;"></i>
          <p>點擊上傳，或將檔案拖拽到此處</p>
        </div>
        <div  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 = https://www.cnblogs.com/yxg2852/archive/2023/03/14/(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 = https://www.cnblogs.com/yxg2852/archive/2023/03/14/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('檔案上傳失敗');
        }
      })
    }

標籤：其他

上一篇：C/S架構和B/S架構兩種數字孿生技術路線的區別是什么？

下一篇：Vue專案遷移小程式，實操干貨分享