uni.request如何设置响应的格式为blob.responseType

uni.request 请求参数包括以下几个字段： 1. url（必需）：请求的地址。 2. data（可选）：需要发送的数据，可以是普通对象或字符串。 3. header（可选）：请求的头部信息，包括 Content-Type、Authorization 等。 4. method（可选）：请求的方法，默认为 GET。常见的方法还有 POST、PUT、DELETE 等。 5. dataType（可选）：响应的数据类型，默认为 json。其他可选值有 text、arraybuffer 等。 6. responseType（可选）：响应的数据类型，默认为 text。其他可选值有 arraybuffer、blob 等。 7. success（可选）：请求成功时的回调函数。 8. fail（可选）：请求失败时的回调函数。 9. complete（可选）：请求完成时的回调函数，无论成功或失败都会执行。 例如，发送一个 POST 请求的示例代码如下： ```javascript uni.request({ url: 'https://api.example.com/login', method: 'POST', data: { username: 'username', password: 'password' }, header: { 'Content-Type': 'application/json' }, success: function(res) { console.log(res.data); }, fail: function(err) { console.log(err); } }); ``` 以上是基本的请求参数，具体使用方法可以参考 uni-app 官方文档中的相关说明。

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