uni.request下载二进制流文件
时间: 2025-01-23 18:10:15 浏览: 74
### 使用 `uni.request` 下载并处理二进制流文件
为了成功使用 `uni.request` 来下载和处理二进制流文件,在请求配置中设置合适的参数至关重要。具体来说,对于响应类型的设定以及后续的数据处理流程需要特别注意。
#### 设置正确的响应类型
当通过 `uni.request` 请求服务器以获取诸如图片、PDF 或其他形式的二进制数据时,应当指定 `responseType` 参数为 `"arraybuffer"` 以便能够正确接收原始字节序列而非默认字符串编码后的结果[^1]。
```javascript
// 配置API请求函数用于获取资源
export function fetchBinaryResource(resourceId) {
return uni.request({
url: `${serverUrl}/api/resource/${resourceId}`, // 替换为实际URL路径
method: 'GET',
responseType: "arraybuffer", // 关键:指明期望得到的是二进制数组缓冲区
});
}
```
#### 处理接收到的二进制数据
一旦获得了来自服务端的二进制响应体,则可以根据应用场景的不同采取相应的措施来展示或保存这些数据。例如:
- **显示图像**:可以创建一个新的 Blob 对象并将之转换成 URL 字符串供 `<img>` 标签加载;
- **预览 PDF 文档**:同样利用 Blob 构造器生成临时链接,并借助第三方库如 pdf.js 实现内嵌阅读体验;
以下是针对这两种情况的具体实现方法:
##### 显示图像实例
```html
<template>
<view class="image-container">
<!-- 图片容器 -->
<image :src="imageUrl"></image>
</view>
</template>
<script>
import { ref } from 'vue';
import { fetchBinaryResource } from './apis';
export default {
setup() {
let imageUrl = ref('');
async function loadAndShowImage(id) {
try {
const response = await fetchBinaryResource(id);
const blob = new Blob([response.data], { type: 'image/jpeg' }); // 假设是JPEG格式
imageUrl.value = URL.createObjectURL(blob); // 将Blob对象转为可访问的URL
} catch (error) {
console.error('Failed to show image:', error);
}
}
// 调用此函数传入想要查看的图片ID即可
loadAndShowImage(someResourceId);
return {
imageUrl,
};
},
};
</script>
```
##### 预览 PDF 文件示例
```html
<template>
<web-view v-if="pdfSrc" :src="pdfSrc"></web-view> <!-- web-view组件适用于H5页面 -->
</template>
<script>
import { ref } from 'vue';
import { fetchBinaryResource } from './apis';
export default {
setup() {
let pdfSrc = ref(null);
async function previewPdfFile(fileId) {
try {
const res = await fetchBinaryResource(fileId);
const blob = new Blob([res.data], {type:'application/pdf'});
// 创建一个指向该blob对象的url
pdfSrc.value = URL.createObjectURL(blob);
} catch(err){
console.log(`Error occurred while trying to open the file ${err}`);
}
}
// 执行previewPdfFile传递具体的fileId作为参数
previewPdfFile(anotherResourceId);
return {
pdfSrc,
};
},
};
</script>
```
上述代码片段展示了如何基于 `uni.request` 和 JavaScript 的内置 API (`Blob`, `URL`) 来有效地管理和呈现从远程服务器获得的各种类型的二进制内容[^2][^3]。
阅读全文
相关推荐


















