uni-app 二进制流存储文件

发布于 1周前 作者 vueper 来自 Uni-App

uni-app 二进制流存储文件

我需要存储二进制流文件到本地,然后再传给服务端使用,现在没有接口可以保存原始二进制流数据

1 回复

在处理 uni-app 中的二进制流存储文件时,通常你会使用小程序的API,因为 uni-app 支持编译为多种平台,包括微信小程序、H5、App等。下面我将以微信小程序为例,展示如何通过二进制流存储文件。

在微信小程序中,可以使用 wx.request 发起网络请求,并在响应中处理二进制数据。然后使用 wx.getFileSystemManager() 获取文件系统管理器,通过它提供的API将二进制数据写入文件。

以下是一个简单的代码示例,演示了如何下载图片并保存到本地:

// 引入必要的库
const fs = wx.getFileSystemManager();

// 发起网络请求,获取二进制数据
wx.request({
  url: 'https://example.com/path/to/your/image.jpg', // 替换为你的图片URL
  method: 'GET',
  responseType: 'arraybuffer', // 指定响应类型为arraybuffer
  success: (res) => {
    if (res.statusCode === 200) {
      const buffer = res.data; // 获取二进制数据
      const filePath = `${wx.env.USER_DATA_PATH}/image.jpg`; // 指定保存路径和文件名

      // 将二进制数据写入文件
      fs.writeFile({
        filePath,
        data: buffer,
        encoding: 'binary', // 指定编码为binary
        success: () => {
          wx.showToast({
            title: '文件保存成功',
            icon: 'success',
          });
          // 可以在这里进行其他操作,比如预览图片
          wx.previewImage({
            urls: [filePath],
          });
        },
        fail: (err) => {
          console.error('文件保存失败', err);
          wx.showToast({
            title: '文件保存失败',
            icon: 'none',
          });
        },
      });
    } else {
      console.error('请求失败', res);
      wx.showToast({
        title: '请求失败',
        icon: 'none',
      });
    }
  },
  fail: (err) => {
    console.error('请求出错', err);
    wx.showToast({
      title: '请求出错',
      icon: 'none',
    });
  },
});

在上面的代码中:

  1. 使用 wx.request 发起GET请求,指定 responseTypearraybuffer 以获取二进制数据。
  2. 通过 wx.getFileSystemManager() 获取文件系统管理器。
  3. 使用 fs.writeFile 方法将二进制数据写入指定路径的文件中。
  4. 在成功保存文件后,使用 wx.showToast 显示提示信息,并使用 wx.previewImage 预览保存的图片。

注意:在实际应用中,你可能需要处理更多的边缘情况,比如请求超时、文件写入冲突等。此外,不同平台(如H5、App)的文件存储方式可能会有所不同,需要根据具体平台进行调整。

回到顶部