taro兼容h5之上传图片及base64转换

Misha韩

已于 2022-05-10 17:49:07 修改

阅读量1.6k

点赞数

分类专栏：小程序 H5 # Taro 文章标签： javascript 小程序 vue.js

于 2022-05-10 17:42:46 首次发布

本文链接：https://blog.csdn.net/hanchengmei/article/details/124692993

版权

小程序同时被 3 个专栏收录

66 篇文章 1 订阅

订阅专栏

Taro

51 篇文章 0 订阅

订阅专栏

12 篇文章 0 订阅

订阅专栏

项目：taro3+vue3+tarouivue3

场景：

上传图片，接口中的参数是图片转的base64

小程序上传图片

1、用chooseImage()获取到临时路径
2、把临时路径转成base64
3、临时路径可以直接显示出图片

小程序转换base64方法

1、Taro.getFileSystemManager().readFileSync(临时路径, ‘base64’)
2、arrayBufferToBase64
1不兼容h5， 2文档中说能兼容h5, 但是在这个接口中无效

h5上传图片

首页想到的是input file

方法一

<input class="input-file-h5" type="file" :id="id" accept="image/*" capture="camera" />

window.onload = function() {
  document.getElementById(id).onchange = function(e) {
    const box = document.getElementById(id)
    const boxIn = box.getElementsByClassName('weui-input')
    console.log(boxIn[0], 'boxIn[0]')
    const file = boxIn[0].files[0]
  }
}

然后用file去换base64, 但是这种上传方式对于页面只有一个input有效，多个就无效

方法二

<input
   class="input-file-h5"
   type="file"
   :id="id"
   accept="image/*"
   capture="camera"
   @change="onChange"/>

onChange(event) {
  console.log(event)
  const file = event.target.firstChild.files[0]
}

方法二对于页面有多个input也是可行的~

file的形式：
在这里插入图片描述

h5的临时图片显示：

将file.name转成base64即可显示

h5转换base64方法

1、js-base64 此项目无效
2、用 FileReader

/**
 * 转换base64
 * @param file blob类型
 */
export function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    let fileResult = ''
    reader.readAsDataURL(file)
    reader.onload = () => {
      fileResult = reader.result
    }
    reader.onerror = error => {
      reject(error)
    }
    reader.onloadend = () => {
      resolve(fileResult)
    }
  })
}