uniapp Vue3 base64 转 blob 没有这个类的解决办法

在用 uniapp 开发 app 会遇到 App 端不支持Blob 没有 Blob 这个类

网上搜了一下教程解决办法如下

思路就是用script标签 renderjs的原生代码去拿到这个 Blob 这个类，此时如果你的代码已经写了很多逻辑不用怕，咱们可以使用 renderjs在renderjs和service之间 具体要了解 renderjs 是什么的可以先看这篇文章juejin.cn/post/704918…

HTML 代码

<u--form
      ref="picInfoRef"
      :rules="picRules"
      :model="pictureInfo"
      labelPosition="top"
      labelWidth="200"
    >
      <!-- TODO 监听到数据变化 -->
      <text :prop="options" :change:prop="upload.onChange"></text>
      <u-form-item prop="id_picture_front" borderBottom>
        <div class="id-card">
          <image
            :src="
              pictureInfo.picture1
                ? pictureInfo.picture1
                : '../../static/image/identity/front.png'
            "
            mode="widthFix"
            @click="uploadImage1"
          ></image>
          <div>{{ $t('id_picture_front') }}</div>
        </div>
      </u-form-item>
      <u-form-item prop="id_picture_back" borderBottom>
        <div class="id-card">
          <image
            :src="
              pictureInfo.picture2
                ? pictureInfo.picture2
                : '../../static/image/identity/back.png'
            "
            mode="widthFix"
            @click="uploadImage2"
          ></image>
          <div>{{ $t('id_picture_back') }}</div>
        </div>
      </u-form-item>
      <u-form-item prop="ocr_img" borderBottom>
        <div class="id-card">
          <image
            :src="
              pictureInfo.picture3
                ? pictureInfo.picture3
                : '../../static/image/identity/man.png'
            "
            mode="widthFix"
            @click="uploadImage3"
          ></image>
          <div>{{ $t('ocr_img') }}</div>
        </div>
      </u-form-item>
    </u--form>

renderjs 层代码

<!-- 上传 转 blob -->
<!-- TODO 这里必须用 renderjs 来转 blob 不然Vue 文件里面没有 blob 这个类,module="upload"对应上面的标识名字随便取-->
<script module="upload" lang="renderjs">
import axios from 'axios';
export default {
  data() {
    return {};
  },
  methods: {
    handleClick(event, ownerInstance) {
      // event是事件对象
      // ownerInstance和this.$ownerInstance是一样的，用来调用service层的方法
      // console.log(event, ownerInstance);
      ownerInstance.callMethod('acceptDataFromRenderjs', {
        content: '测试文字',
      });
    },
    onChange(newValue, oldValue, ownerInstance, instance) {
      // console.log('service层中的options发生变化');
      console.log('新值', newValue);
      // console.log('旧值', oldValue);

      if (!newValue) {
        return;
      }
      let { speech, put_url, url, tempFiles } = newValue;
      let file = tempFiles ? tempFiles : this.dataURLtoBlob(speech);
      console.log(file,url);
      axios
        .put(put_url, file)
        .catch((error) => {
          // 请求失败处理逻辑
          uni.$u.toast(`${t('network_err')}`);
          console.error(error);
        });


      // ownerInstance和this.$ownerInstance一样，可用来向service层通信
      // instance和ownerInstance的区别是：
      // instance.$el指向的是触发事件的那个节点；ownerInstance.$el指向当前vue文件中的根节点；
      // instance的作用目前尚不明确，官方没有给出用法
    },
    // base64转blob
    dataURLtoBlob(dataurl) {
      var arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], {
        type: mime,
      });
    },
  },
  created() {
    console.log('renderjs初始化完毕');
  },
};
</script>

<script setup> 
import { ref, reactive, computed, watch } from 'vue';

//这是根据 uniapp封装好的选择图片的函数 
import { uploadImage } from '../../utils/common/upload';

// 这个地方，用于触发change
const options = ref();
// 上传图片 正面 需要调用接口识别
async function uploadImage1() {
  let uploadRes = await uploadImage();
  console.log(uploadRes);
  options.value = uploadRes;
  pictureInfo.picture1 = uploadRes.path;
  pictureInfo.id_picture_front = uploadRes.url;
  // console.log({ speech, url, path, put_url });
  // console.log(tempFiles);
}
// 上传图片 背面 需要调用接口识别
async function uploadImage2() {
  let uploadRes = await uploadImage();
  options.value = uploadRes;
  pictureInfo.picture2 = uploadRes.path;
  pictureInfo.id_picture_back = uploadRes.url;
}
// 上传图片 手持 需要调用接口识别
async function uploadImage3() {
  let uploadRes = await uploadImage();
  options.value = uploadRes;
  pictureInfo.picture3 = uploadRes.path;
  pictureInfo.ocr_img = uploadRes.url;
}
<script>