blob转换成file文档流

将Blob对象转换为File对象，需要使用File构造函数。File构造函数需要传入一个数组，数组的元素是Blob对象和文件名。

下面是将Blob对象转换为File对象的示例代码：

function blobToFile(blob, fileName) {
  const b = new Blob([blob], {type: blob.type});
  b.lastModifiedDate = new Date();
  b.name = fileName;
  return b;
}

使用示例：

const blob = new Blob(['Hello, World!'], {type: 'text/plain'});
const file = blobToFile(blob, 'hello.txt');
console.log(file);

输出：

File {name: "hello.txt", lastModified: 1625639889284, lastModifiedDate: Date 2021-07-07T08:51:29.284Z, webkitRelativePath: "", size: 13, …}

可以看到，输出的是一个File对象。可以通过FileReader读取文件流。

相关问题

后端返回blob文件流

### 处理后端返回的Blob文件流

#### 接收Blob文件流
为了处理来自服务器的Blob响应，可以使用`axios`库发送请求，并设置响应类型为`blob`。这允许客户端正确解析二进制数据而不是尝试将其作为JSON或其他文本格式读取。

import axios from 'axios';

const downloadFile = async (url, fileName) => {
  try {
    const response = await axios.get(url, {
      responseType: 'blob' // 设置响应的数据类型为blob
    });
    
    saveAs(response.data, fileName); // 调用函数来保存文件
    
  } catch (error) {
    console.error('There was an error downloading the file!', error);
  }
};

此代码片段展示了如何配置HTTP GET请求以获取Blob类型的资源[^1]。

#### 创建Blob对象并指定MIME类型
一旦收到Blob形式的内容，则可以根据实际情况创建一个新的Blob实例，并为其分配合适的媒体类型（即MIME类型）。这对于确保浏览器能够识别所下载文件的实际格式至关重要。

// 假设response.data是从API获得的原始Blob数据
const blob = new Blob([response.data], { type: 'application/pdf' }); // 如果是PDF文档则如此设定

这里假设正在处理的是一个PDF文件；如果是其他类型的文件，则应相应调整MIME字符串[^3]。

#### 自动触发文件下载行为
为了让用户无需手动操作就能立即开始下载过程，可以通过JavaScript动态生成<a>标签并将href属性指向由URL.createObjectURL()方法创建的对象URL。之后模拟点击事件即可启动下载流程。

function saveAs(blobData, filename){
  let link=document.createElement("a");
  link.href=URL.createObjectURL(blobData);
  link.download=filename;
  
  document.body.appendChild(link);
  link.click();
  URL.revokeObjectURL(link.href); // 清除内存中的临时URL
}

这段脚本实现了将给定的Blob数据转换成可被浏览器理解的形式，并促使它作为一个附件被下载下来[^2]。

#### 展示预览功能（针对特定文件）
对于某些支持在线查看的文件类型（如图片、视频或Office文档），可以在不实际下载的情况下提供即时预览选项。此时只需简单地把Blob对象赋值给<img>/<video>/iframe等HTML元素的src属性即可完成加载显示工作。

<!-- HTML部分 -->
<template>
  <div v-if="previewUrl">
    <!-- 根据不同文件类型选择适合的展示组件 -->
    <img :src="previewUrl" alt="" />
    <!-- 或者 -->
    <embed :src="previewUrl" width="80%" height="600px"/>
  </div>
</template>

<script setup lang="ts">
let previewUrl;

async function fetchAndPreview(url:string){
  const response = await axios.get(url,{
    responseType:'blob'
  });

  previewUrl = URL.createObjectURL(new Blob([response.data]));
}

onMounted(() => {
  fetchAndPreview('/api/get-file');
});
</script>

上述例子说明了如果想要在页面上直接呈现接收到的文件内容而不必先存储到用户的设备里该怎么做[^4]。

小程序base64转换成file

小程序中，Base64编码是一种常见的数据压缩和传输格式，常用于将二进制数据如图片、音频等转化为文本字符串。如果你想把Base64编码的字符串转换为文件，可以按照以下步骤操作：

1. 首先，你需要获取到Base64编码的数据，这通常作为字符串存储在变量里。

let base64String = 'your_base64_data_here';

2. 然后，你可以使用小程序提供的API `atob` 来解码Base64字符串，得到原始的字节数组。

let decodedData = window.atob(base64String);

3. 创建一个新的Blob对象，这个对象表示浏览器本地的一个不可见的文件，然后使用其构造函数传入字节数组。

let byteArr = new Uint8Array(decodedData.length);
for (let i = 0; i < decodedData.length; i++) {
  byteArr[i] = decodedData.charCodeAt(i);
}

let fileBlob = new Blob([byteArr], {type: 'image/jpeg'});

4. 最后，你可以创建一个File对象，并提供给需要的地方，比如上传功能。

let file = {name: 'decoded_file', url: URL.createObjectURL(fileBlob), type: 'image/jpeg'};
// 使用file对象进行上传或后续处理

注意：`window.atob` 和 `URL.createObjectURL` 都是在浏览器环境下可用的API，如果你在小程序后台或其他非浏览器环境中，你需要查阅相应平台的文档找到相应的转换方法。