uniapp将图片转换为base64的方法

最新推荐文章于 2025-03-05 11:12:57 发布

居然鼬个高手

最新推荐文章于 2025-03-05 11:12:57 发布

阅读量4.8k

点赞数 3

文章标签： uni-app 前端 javascript

本文链接：https://blog.youkuaiyun.com/NY1007/article/details/127409320

版权

这是一个关于如何在不同平台（如微信小程序、H5和App-Plus）上将图片转换为base64编码的代码实现。方法中包含了针对不同平台的适配代码，确保在各平台下图片可以成功转换并用于展示。同时，代码还包含图片大小的检查，以防止超过450KB的图片加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 图片转base64方法
imgToBase64(url, callback) {
  // #ifdef MP-WEIXIN

  uni.getFileSystemManager().readFile({
    filePath: url, //选择图片返回的相对路径
    encoding: 'base64', //编码格式
    success: res => { //成功的回调
      console.log(res, '返回结果');
      let base64 = 'data:image/jpeg;base64,' + res.data //不加上这串字符，在页面无法显示的哦
      callback && callback(base64)
    },
    fail: (e) => {
      console.log("图片转换失败");
    }
  })

  // #endif

  // #ifdef H5

  uni.request({
    url: url,
    method: 'GET',
    responseType: 'arraybuffer',
    success: res => {
      if (res.header['content-length'] > 450 * 1024) {
        return uni.showToast({
          title: '图片大小不能超过450k',
          icon: 'none'
        })
      }
      let base64 = uni.arrayBufferToBase64(res.data); //把arraybuffer转成base64
      base64 = 'data:image/jpeg;base64,' + base64;
      callback && callback(base64)
    },
    fail: (e) => {
      console.log("图片转换失败");
    }
  })

  // #endif

  // #ifdef APP-PLUS

  plus.io.resolveLocalFileSystemURL(url, (entry) => {
    entry.file((file) => {
      let fileReader = new plus.io.FileReader();
      if (file.size > 450 * 1024) {
        return uni.showToast({
          title: '图片大小不能超过450k',
          icon: 'none'
        })
      }
      fileReader.onloadend = (e) => {
        callback && callback(e.target.result)
      };
      fileReader.readAsDataURL(file);
    })
  })
  // #endif
}