如何使用uniapp将本地图片转换为二进制流上传

2023-10-12 13:13:00

将本地图片转换为二进制流：uniapp 开发人员指南

简介

对于许多 uniapp 开发人员来说，在应用程序中使用本地图片是一个常见的挑战。解决此问题的方法是将本地图片转换为二进制流。这篇文章将深入探讨将本地图片转换为二进制流的各种方法，并提供分步指南，帮助 uniapp 开发人员轻松实现这一目标。

什么是二进制流？

二进制流本质上是一串二进制数字，表示图像数据。通过将图像转换为二进制流，可以轻松地通过网络传输图像。uniapp 提供了一个易于使用的 API，允许开发人员将本地图片转换为二进制流，从而简化了图像处理流程。

使用 uniapp API 转换本地图片

uniapp 提供的 API 使得将本地图片转换为二进制流变得非常简单。以下是实现此功能的分步指南：

uni.chooseImage({
  count: 1, // 最多选择一张图片
  sourceType: ['album'], // 从相册中选择
  success: (res) => {
    const tempFilePath = res.tempFilePaths[0]; // 获取图片的临时文件路径
    // 使用 uni.getFileSystemManager() 读取文件
    uni.getFileSystemManager().readFile({
      filePath: tempFilePath,
      encoding: 'base64', // 将文件内容转换为 base64 编码
      success: (res) => {
        // 上传图片
        uni.uploadFile({
          url: '服务器地址', // 上传图片的服务器地址
          filePath: tempFilePath, // 要上传的图片临时文件路径
          name: 'file', // 上传图片的字段名
          header: { 'content-type': 'multipart/form-data' }, // 设置请求头
          formData: { 'file': res.data }, // 将图片内容作为 formData 参数上传
          success: (res) => {
            // 上传成功后，res.data 包含服务器返回的数据
            console.log(res.data);
          },
          fail: (err) => {
            // 上传失败
            console.log(err);
          },
        });
      },
      fail: (err) => {
        // 读取文件失败
        console.log(err);
      },
    });
  },
  fail: (err) => {
    // 选择图片失败
    console.log(err);
  },
});