当前位置：首页 > news >正文

taro 兼容支付宝小程序和微信小程序＜七＞-- 上传图片及图片转base64

news 来源：原创 2024/5/10 14:55:45

项目：taro3 + vue3

描述：

上传图片，证件的地方需要识别
微信和h5端是用的base64方式传参 -> taro兼容微信小程序和h5 - 上传图片及转换base64

本文是在以上的基础上兼容支付宝小程序

方法一

这个是官方文档的方法，效果如何没有试…

my.chooseImage({
  success: res => {
    const path = res.apFilePaths[0];
    console.log(path);
    my.uploadFile({
      url: 'https://...', // 请替换成有效的服务端 url
      fileType: 'image',
      fileName: 'userfile',
      filePath: path,
      formData: { extra: '其他信息' },
      success: res => {
        my.alert({ title: '上传成功' });
      },
      fail: err => {
        my.alert({ title: '上传失败', content: JSON.stringify(err) });
      },
    });
  },
});

方法二

用base64的方法
1、用官方的方法转，真机报错

my.chooseImage({
  success: res => {
    const fs = my.getFileSystemManager();
    fs.readFile({
      filePath: `${res.apFilePaths[0]}`,
      // readFile 不传入 encodding 参数，则以 ArrayBuffer 方式读取
      success:({ data }) => {
        const base64 = my.arrayBufferToBase64(data);
        // 
      },
    });
  }
});

在这里插入图片描述
2、用canvas转
页面中放一个canvas, 通过toDataURL转base64

<canvas
    id="upload-canvas"
    :width="canvasWidth"
    :height="canvasHeight"
    style="display: none;">
</canvas>

canvasWidth = ref(160)
canvasHeight = ref(160)

events.on(PAGE_EVENTS.SET_CANVAS_SIZE, data => {
  const { width, height } = data
  this.canvasWidth.value = width
  this.canvasHeight.value = height
})

/**
 * 支付宝转base64
 * @param id canvasId
 * @param path 路径
 */
export async function useGetBase64InAlipay({ id, path }) {
  const { width, height } = await useGetImageInfo(path)
  let newWidth = width
  let newHeight = height
  let scale = 1
  if (width > height) {
    newWidth = width > 750 ? 750 : width
    scale = newWidth / width
    newHeight = parseInt(height * scale)
  } else {
    newHeight = height > 750 ? 750 : height
    scale = newHeight / height
    newWidth = parseInt(width * scale)
  }

  if (!ctx || (ctx && (newWidth !== canvasWidth || newHeight !== canvasHeight))) {
    ctx = Taro.createCanvasContext(id)
    canvasWidth = newWidth
    canvasHeight = newHeight
    events.trigger(PAGE_EVENTS.SET_CANVAS_SIZE, { width: newWidth, height: newHeight })
  }

  return new Promise(resolve => {
    ctx.drawImage(path, 0, 0, newWidth, newHeight)
    ctx.draw(false, () => {
      ctx.toDataURL().then(async dataURL => {
        resolve(dataURL)
      })
    })
  })
}

/**
 * 获取图片信息
 * @param path
 */
export function useGetImageInfo(path) {
  return new Promise(resolve => {
    my.getImageInfo({
      src: path,
      success: res => {
        resolve(res)
      }
    })
  })
}