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;
}