怎样从blob获取图片地址并显示在uniapp项目中

在UniApp中，当你通过`uni.chooseimage`获取到H5版本的图片路径时，它通常是以`blob:`开头的URL形式，如`blob:http://xxxx/xxxx`。这些Blob URL并不是可以直接展示在页面上的，因为它们代表的是原始二进制数据而非文件路径。

要显示图片，你需要先将Blob转换为真正的文件，然后再操作。这可以通过创建一个新的File对象实现：

// 假设blobPath是获取到的blob URL
let blob = uni.createObjectURL(blobPath);
let file = await uni.convertToTempFile({ url: blob });

// 现在file的路径可以用于显示或上传到阿里云OSS
let imageUrl = file.path;
// 或者直接上传
await uploadToOSS(imageUrl); // 自定义的上传方法

这里的`uploadToOSS`方法应该替换为你实际的上传阿里云OSS的API调用，它会接收本地文件路径作为参数。

关于获取上传后的图片名称，正如引用所说，可能需要依赖于返回的响应或者其他方式，因为Blob URL本身并不包含完整的文件信息。在上传完成后，如果阿里云OSS提供了上传结果的回调或返回的JSON，你可以从中获取新的图片名称。

相关问题

uniapp从服务器端获取图片并显示

UniApp 是一款基于 Vue.js 的跨平台应用开发框架，它支持快速构建原生应用。从服务器端获取图片并在 UniApp 中显示，你可以按照以下步骤操作：

1. **设置请求头**: 首先需要通过 `axios` 或者 UniApp 提供的 `request` API 发起 HTTP 请求，设置 `Content-Type` 为 `image/*` 来告诉服务器返回的是图片数据。

import axios from '@dcloudio/axios';

async function getImageFromServer(url) {
  const response = await axios.get(url, {
    headers: { 'Content-Type': 'image/*' }
  });
  return response.data;
}

2. **处理响应**: 获取到服务器的响应后，通常是一个 `Blob` 对象或者一个包含 Base64 编码的字符串，你可以选择合适的方式将其转换成可以展示的图片格式。

- 如果是 Blob 对象，可以使用 `uni.getImageInfo` 函数转成 ImageSource：

     let blob = await getImageFromServer(url);
     let source = await uni.getImageInfo({ src: URL.createObjectURL(blob) });
     this.imgSrc = source.path; // 使用在组件中显示

- 如果是 Base64 字符串，可以创建 `img` 标签直接设置 `src` 属性：

     let base64Image = 'data:image/jpeg;base64,' + await getImageFromServer(url).data;
     this.imgSrc = base64Image;
     `<img :src="imgSrc" />`

3. **添加图片到页面**: 将获取到的图片源插入到需要显示图片的标签（如 `img`）中。

<template>
  <view>
    <img :src="imgSrc" />
  </view>
</template>

<script setup>
import { ref } from 'vue';
const imgSrc = ref('');
// ... 在适当的地方调用 getImageFromServer 并更新 imgSrc
</script>

uniapp项目结合uview,上传图片，获取到的图片是blob类型，但是没有指定图片类型，应该怎么处理

如果你使用的是uniapp的上传图片API，那么默认情况下会返回blob类型的数据。但是，这个blob类型的数据并没有指定图片类型，需要通过其他方式获取图片类型。

一种可行的方式是使用js的FileReader对象，将blob类型的数据转换成DataURL格式，然后从DataURL中获取图片类型。具体的代码如下：

// 上传文件成功后的回调函数，其中response是返回的blob类型的数据
success: function (response) {
  // 将blob类型的数据转换成DataURL格式
  var reader = new FileReader();
  reader.readAsDataURL(response);
  reader.onload = function () {
    var dataURL = reader.result;
    // 从DataURL中获取图片类型
    var type = dataURL.split(";")[0].split(":")[1];
    console.log(type);
  };
}

在上面的代码中，我们首先使用FileReader对象将blob类型的数据转换成DataURL格式，然后从DataURL中获取图片类型。最后，我们可以将获取到的图片类型保存起来，或者直接使用它进行后续的操作。