uni-app图片转换base64，看起来很难，实际一点也不简单？

大风写全栈

发布于 2024-11-15 10:44:07

62200

代码可运行

文章被收录于专栏：锤子代码锤子代码

运行总次数：0

代码可运行

感觉很简单的需求

图片转base64一想就很简单，毕竟几行代码就能搞定（后台代码写多的幻觉罢了）。

说干就干，一番折腾，发现这个并没那么简单。

第一步，选择图片，直接调用uni.chooseImage()，顺利。

第二步，只拿到了图片路径？？图片路径？？？

傻眼~

继续找方案

找了一圈，有个合适的方案————拿到地址，读取地址后面的图片，转成base64。

好在有大佬封装了一个库，来实现这个功能：image-tools（①）。

这个库里面实现了，图片路径转base64，图片base64保存为文件。

还是很方便。

提示：如果你用的是Vue 3的uni-app,从uni-app插件市场安装插件的时候会提示你可能有兼容问题，不用管。忽略就行。

来个🌰

全部代码如下：

// 引入
import { pathToBase64 } from '../../js_sdk/mmmm-image-tools/index.js';


let that = this;
// 调用
uni.chooseImage({
  count: 1, // 单次只能上传1张
  sourceType: ['album', 'camera'], //从相册、相机选择
  sizeType: ['original', 'compressed'], // (不支持H5)可以指定是原图还是压缩图，默认二者都有
  success: function (res) {
    uni.getImageInfo({
      src: res.tempFilePaths[0],
      success: (path) => {
        pathToBase64(path.path)
          .then((base64) => {
            // 返回图片的base64.
            console.log(base64);
            // 假设设置个图片显示.
            that.imageBase64 = base64;
          })
          .catch((error) => {
            console.error(error);
          });
      }
    });
  }
});

这么简单，一看就明白了~

①：图片转base64工具插件地址

https://ext.dcloud.net.cn/plugin?id=123