Taro 本地圖片上傳轉Base64

描述

• 使用Taro將本地圖片轉成base64格式

嘗試一 (真機提示有誤)

1. 使用Taro.chooseImage獲取圖片路徑
2. 然后使用下面的方法轉成base64，但發現真機調試時會提示“接口請求失敗”
3. 模擬器獲取的圖片path是"http://xxx"，真機獲取的圖片path是"wxfile://xxx"

/** 本地圖片轉Base64*/
async function imgToBase64({ path }) {
  try {
    const result = await Taro.request({
      url: path,
      responseType: "arraybuffer"
    });
    if (result && result.statusCode !== 200) {
      Taro.getLogManager().warn("圖片獲取失敗", result);
      throw new Error("圖片獲取失敗。");
    }
    let base64 = Taro.arrayBufferToBase64(result.data);
    base64 = "data:image/jpeg;base64," + base64;
    return base64;
  } catch (error) {
    console.warn("=> utilssearch.ts error imgToBase64", error);
    throw error;
  }
}

嘗試二（可行）

• 使用Taro的文件管理器
  https://taro-docs.jd.com/taro/docs/apis/files/FileSystemManager
• 將讀取到的圖片文件進行base64轉換：

/**
 * 本地圖片轉Base64
 * @param param.path 文件路徑
 * @returns Base64圖片字符串
 */
function imgToBase64({ path }) {
  let res = "";
  try {
    const base64 = Taro.getFileSystemManager().readFileSync(path, "base64");
    if (base64) {
        res = "data:image/jpeg;base64," + base64;
    }
  } catch (error) {
    console.warn("=> utilssearch.ts error imgToBase64", error);
    throw error;
  } finally {
    return res;
  }
}

2021-06-08 更新

• 升級了方法，Taro不僅可以轉本地圖片，還能轉網絡圖片為Base64 🎉

/**
 * 圖片轉Base64
 * @returns Base64圖片字符串
 */
interface ImgToBase64Params {
  /** 本地圖片路徑或網絡圖片路徑 */
  url: string;
}
async function imgToBase64(params: ImgToBase64Params) {
  let res = "";
  // 圖片鏈接必填
  if (!params?.url) {
    return res;
  }
  try {
    // 獲取圖片信息(本地圖片鏈接)
    const successCallback = await Taro.getImageInfo({
      src: params.url
    });
    const { path, type } = successCallback;
    if (!path) {
      return res;
    }
    // 本地圖片轉Base64
    const base64 = Taro.getFileSystemManager().readFileSync(path, "base64");
    res = `data:image/${type};base64,${base64}`;
  } catch (error) {
    console.warn("=> utilssearch.ts error imgToBase64", error);
    throw error;
  } finally {
    return res;
  }
}

/**
 * 獲取去前綴的base64圖片
 * @param base64Img 圖片
 */
function imgBase64WithoutHeader(base64Img: string) {
  let res: string = "";
  if (!base64Img) {
    return res;
  }
  res = base64Img.toString().replace(/^data:image\/\w+;base64,/, "");
  return res;
}