快速上傳微信素材

當(dāng)我們編寫了博客后，想將博客內(nèi)容發(fā)送到微信公眾平臺(tái)時(shí)，會(huì)遇到一個(gè)新的阻礙：圖片需要重新上傳。

MD轉(zhuǎn)成微信樣式后有很多方式，之前我們提到的md.openwrite.cn，或者直接使用OpenWrite中編輯文章后顯示的公眾號(hào)預(yù)覽功能都能基本滿足要求，但是！復(fù)制的內(nèi)容粘貼在微信后，無(wú)法解決圖片無(wú)法加載的問題，功能實(shí)用性大打折扣。

理清思路

失敗的素材的處理

圖片不是微信的，會(huì)提示失敗圖片，我們需要通過(guò)點(diǎn)擊查看失敗圖片找到對(duì)應(yīng)的圖片，然后選中失敗圖片后，點(diǎn)擊圖片->本地上傳再?gòu)谋镜剡x擇圖片上傳，若提前存圖片庫(kù)的，可以從圖片庫(kù)中選擇。

重復(fù)動(dòng)作梳理

1、找到失敗圖片，選中失敗圖片

2、獲取失敗圖片路徑

3、點(diǎn)擊圖片->本地上傳

4、找到對(duì)應(yīng)失敗圖片的本地路徑

5、點(diǎn)擊確定

需要處理的核心問題

1、通過(guò)失敗圖片路徑找到本地路徑

2、重復(fù)動(dòng)作太多，需要簡(jiǎn)化操作

解決問題

替換圖片路徑為本地路徑

我們可以u(píng)Tools的自動(dòng)化助手，幫我們將圖片下載，然后替換成本地的路徑

let path = ENTER.payload
//路徑為https://mixley.stdcdn.com/ 替換為應(yīng)用中路徑
let url="https://mixley.stdcdn.com/";
let dic="C:/Users/micke/OneDrive/應(yīng)用/PoweredBy.Cloud/mixley.stdcdn.com/";

//圖片下載保存路徑
let imgdowndir="E:/mixley/Pictures/Saved Pictures/"

//定義獲取UUID的方法
let getUUID=function(){
  //UUID來(lái)自UUID插件中算法
  const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
    let r = Math.random() * 16 | 0
    let v = c === 'x' ? r : (r & 0x3 | 0x8)
    return v.toString(16)
  })
  return uuid;
}
//定義執(zhí)行路徑
let executePath=function(path){
  utools.copyText(path);
  utools.simulateKeyboardTap('v',utools.isMacOs() ? 'command' : 'ctrl');
}
if(path.indexOf(url)>-1){
  path = path.replace(url,dic);
  executePath(path);
}else{
//下面為下載圖片后替換本地路徑
path = imgdowndir+getUUID()+'.png';
//下載
utools.ubrowser.goto(ENTER.payload)
  .wait(500)
  //將Img截圖，保存為png
  .screenshot("img", path)
  .run({ show: false })
  .then(() => {
    executePath(path)
  })
  .catch(err => { utools.showNotification(err.message) })
}

特別說(shuō)明

如果使用OD作為圖床，再OD中找到應(yīng)用文件夾，將它設(shè)置為始終在此設(shè)備保留，解決同步問題。

解決重復(fù)步驟問題

先看下瀏覽器有哪些操作可以讓我們后面進(jìn)行使用。

瀏覽器特定操作說(shuō)明

1、Ctrl+L可以進(jìn)入到link欄，即瀏覽器的地址欄（大部分瀏覽器）。

2、輸入javascript:指令可以執(zhí)行對(duì)應(yīng)頁(yè)面對(duì)應(yīng)的指令，如下指令在瀏覽器地址欄輸入后可在當(dāng)前頁(yè)面顯示時(shí)間戳(注意，javascript:無(wú)法可能粘貼到瀏覽器，可以先輸入j，再?gòu)?fù)制粘貼后面的部分)

javascript:(function(){alert((new Date()).valueOf());})();

3、選擇文件的文件框選擇中，如果輸入互聯(lián)網(wǎng)地址，系統(tǒng)會(huì)自動(dòng)下載文件，并且跳轉(zhuǎn)到對(duì)應(yīng)的本地路徑，但是可能存在下載多次。

微信公眾號(hào)特定DOM元素及操作分析

咱們不用分析太多微信的內(nèi)部邏輯，就順著微信公眾號(hào)的操作來(lái)簡(jiǎn)化，咱們是為了簡(jiǎn)化操作不是為了破解。

//獲取到ueditor_0編輯器的上下文(iframe)
document.getElementById("ueditor_0")
//下面為具體獲取的document
document.getElementById("ueditor_0").contentWindow.document
//說(shuō)明，后面的document都是指上面這個(gè)方式獲取的。

<!--這個(gè)是獲取到的錯(cuò)誤圖片的大概結(jié)構(gòu)，具體內(nèi)容分析見下-->
<section class="page_image_error js_catchremoteimageerror js_uneditable custom_select_card js_uneditablemouseover custom_select_card_selected" data-remoteid="c1625917818338" data-scene="catch" data-global="0" data-canretry="1" data-reason="%E6%8B%89%E5%8F%96%E5%9B%BE%E7%89%87%E6%95%B0%E6%8D%AE%E5%A4%B1%E8%B4%A5" data-imgtype="img" data-cacheurl="https://mixley.stdcdn.com/2021/07/maven/clip_image010.jpg" data-filename="undefined" style="width:553px;height:153px;" contenteditable="false"><!--省略--></section>

1、 選中到錯(cuò)誤的圖片

//獲取方式1 可能存在多個(gè)，可以輪詢。
document.getElementsByClassName("page_image_error")[0].click();
//獲取選中圖片
document.getElementsByClassName("page_image_error")[0];

//獲取方式2 .js_msg_next 進(jìn)行點(diǎn)擊，模擬界面上 查看失敗圖片按鈕，不建議
document.getElementsByClassName("js_msg_next")[0].click();
//獲取選中圖片
document.getElementsByClassName("custom_select_card_selected")[0];

2、獲取到錯(cuò)誤圖片的地址

//讀取元素中的data-cacheurl,直接使用dataset
document.getElementsByClassName("page_image_error")[0].dataset.cacheurl

3、點(diǎn)擊上傳按鈕

//實(shí)際研究源碼，是使用的jq，有興趣的可以把圖片下載后轉(zhuǎn)base64，直接免打開上傳按鈕
document.getElementsByName("file")[0].click()

4、粘貼并轉(zhuǎn)換地址，這里使用替換圖片路徑為本地路徑或者直接復(fù)制原地址

5、確定后上傳，其余的步驟重復(fù)

完整代碼

在uTools自動(dòng)化工具中，我們編寫代碼

//定義替換圖片的本地路徑
let url="https://mixley.stdcdn.com/";
let dic="C:/Users/micke/OneDrive/應(yīng)用/PoweredBy.Cloud/mixley.stdcdn.com/";

//貌似會(huì)出現(xiàn)命令串行，需要暫停下
let sleep =function(numberMillis) { 
  let now = new Date(); 
  let exitTime = now.getTime() + numberMillis; 
  while (true) { 
    now = new Date(); 
    if (now.getTime() > exitTime) 
    return; 
  } 
}
//此方法在瀏覽器中執(zhí)行js語(yǔ)句，可以直接操作dom
let executeJs=function(data){
  let d = 'let url="'+url+'";'+
  'let dic="'+dic+'";';
  //進(jìn)入到瀏覽器地址欄
  utools.simulateKeyboardTap('l',utools.isMacOs() ? 'command' : 'ctrl');
  //這里不停下，可能會(huì)將文本復(fù)制到正文
  sleep(100);
  //本來(lái)是先輸入j再輸入后面的內(nèi)容的，但是發(fā)現(xiàn)中文輸入有問題，改為錄入后刪除
  let val="_javascript:(function(){"+d+data+"})();"
  utools.copyText(val);
  utools.simulateKeyboardTap('v',utools.isMacOs() ? 'command' : 'ctrl');
  sleep(20);
  utools.simulateKeyboardTap('home',utools.isMacOs() ? 'command' : 'ctrl');
  sleep(20);
  utools.simulateKeyboardTap('delete');
  sleep(20);
  utools.simulateKeyboardTap('enter');
}

//注意，execCommand已廢棄，替代方法暫無(wú)。
//執(zhí)行的內(nèi)容，獲取圖片地址，注意，結(jié)尾需要分號(hào); 別寫//注釋哦，否則無(wú)法執(zhí)行
let urlPath=`
let editDocument = document.getElementById("ueditor_0").contentWindow.document;
let errorimg = editDocument.getElementsByClassName("page_image_error");
/**將文本復(fù)制到剪貼板，后期瀏覽器廢棄后，升級(jí)為其它方式**/
let copyText=function(text){
  let input = document.createElement('input');
  input.setAttribute("value", text);
  document.body.appendChild(input);
  input.select();
  document.execCommand("copy"); 
  document.body.removeChild(input);
};
if(errorimg.length){
  errorimg[0].click();
  let cacheurl = errorimg[0].dataset.cacheurl;
  /**替換為本地路徑**/
  cacheurl = cacheurl.replace(url,dic);
  if(cacheurl.indexOf(dic)>-1){
    cacheurl=cacheurl.replaceAll("/", "\\\\");
  };
  copyText(cacheurl);
  /**此處使用模擬打開文件上傳的方式，可以替換為其它，源碼是操作base64的，我懶得解析了，夠用**/
  document.getElementsByName("file")[0].click();
};
`
//開始執(zhí)行(可以寫循環(huán)，全部執(zhí)行完畢，判斷條件)
executeJs(urlPath);
//依據(jù)電腦性能停留不同的時(shí)間
sleep(500);
utools.simulateKeyboardTap('v',utools.isMacOs() ? 'command' : 'ctrl');

//這里回車可以你自己按下去,繼續(xù)使用前面提供的替換腳本，將圖片快速下載，使用自帶的下載比較慢
// sleep(20);
// utools.simulateKeyboardTap('enter');

演示效果