uniapp 上传图片临时文件转成Blob

以下是uniapp上传图片临时文件转成Blob的方法：

// 引入toBlob插件
import toBlob from 'toblob'

// 将图片转为base64
let base64 = 'data:image/png;base64,iVBORw0KG...'

// 将base64转为Blob
toBlob.base64ToBlob({b64data: base64, contentType: 'image/png'}).then(res => {
  // res即为转换后的Blob对象
  console.log(res)
})

相关问题

uniapp手机上传图片blob转成base64

你可以使用uniapp的`uni.getImageInfo`方法获取图片的信息，然后使用`uni.getFileSystemManager().readFile`方法将图片转换为base64格式。下面是一个示例代码：

uni.getImageInfo({
  src: imagePath,
  success: function (res) {
    uni.getFileSystemManager().readFile({
      filePath: res.path,
      encoding: 'base64',
      success: function (data) {
        var base64Image = 'data:image/' + res.type + ';base64,' + data.data;
        console.log(base64Image);
      },
      fail: function (error) {
        console.log(error);
      }
    });
  },
  fail: function (error) {
    console.log(error);
  }
});

在上面的代码中，`imagePath`是图片的路径。首先使用`uni.getImageInfo`方法获取图片的信息，然后使用`uni.getFileSystemManager().readFile`方法读取图片文件并将其转换为base64格式。最后，可以在成功回调函数中获取到转换后的base64图片数据。

请注意，这个方法需要在真机上测试，因为在H5端可能会受到跨域限制。

uniapp如何将图片地址转换成文件流

UniApp 可以通过内置的 `FileReader` API 将图片地址转换为文件流。以下是基本步骤：

1. 首先，你需要获取到图片的 URL 或者本地路径。假设你已经有了一个图片 URL，例如 `https://example.com/image.jpg`。

2. 创建一个 `<img>` 元素，并设置其 `src` 属性为图片 URL，这会触发浏览器下载图片：

<template>
  <div>
    <img :src="imageUrl" @load="handleImageLoad" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg',
    };
  },
  methods: {
    handleImageLoad(e) {
      const img = e.target; // 获取当前加载完成的img元素
      this.convertImageToBlob(img); // 调用这个方法处理图片
    },
    convertImageToBlob(imgElement) {
      // 使用FileReader读取图片
      const reader = new FileReader();
      reader.onload = (e) => {
        this.imageBlob = e.target.result; // 图片已转换为Blob对象
      };
      reader.readAsDataURL(imgElement.src); // 开始读取图片数据URL
    },
  },
};
</script>

当你调用 `convertImageToBlob` 方法时，它会等待图片完全加载完毕，然后从 `reader.onload` 回调中得到图片的 base64 数据 URL，再将其转化为 Blob 对象。