uni.request下载二进制流文件

### 使用 `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]。