新时代图片上传超强教程：uni-app和小程序分享选择图片干货

2022-11-19 15:15:57

选择图片的终极指南：轻松掌控 uni-app 和小程序

在 uni-app 和小程序开发中，选择图片是必不可少的操作，然而有时却会遇到棘手的问题，如安卓手机无法选取图片等。今天，让我们深入探索 uni-app 和小程序图片选择的技巧，轻松解决这些烦恼，提升开发效率。

1. 了解 uni.chooseMedia 方法

uni.chooseMedia 方法用于选择图片或视频，支持多种格式，包括 jpg、png、gif 和 mp4 等。其语法为：

uni.chooseMedia(object)

object 参数是一个包含以下属性的对象：

count： 选择图片或视频的数量，默认值为 9
sizeType： 选择图片或视频的尺寸类型，默认值为 ['original', 'compressed']
sourceType： 选择图片或视频的来源类型，默认值为 ['album', 'camera']

2. 使用 uni.chooseMedia 方法选择图片

在 uni-app 和小程序中，可通过以下步骤使用 uni.chooseMedia 方法选择图片：

添加一个带有点击事件的按钮。
在点击事件中，调用 uni.chooseMedia 方法。
在 uni.chooseMedia 方法的回调函数中，获取选中的图片。

示例代码：

uni.chooseMedia({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success: function (res) {
    // 获取选中的图片
    var tempFilePaths = res.tempFilePaths;
  }
});

3. 解决安卓手机无法选择图片问题

某些情况下，安卓手机可能无法选取图片，这是由于安卓系统的限制。解决方法如下：

添加权限：在 AndroidManifest.xml 文件中添加权限：

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

添加临时目录：在项目中添加一个临时目录，并将其添加到 AndroidManifest.xml 文件中的 paths 标签中：

<paths>
  <external-path name="temp" path="Android/data/包名/cache" />
</paths>

使用 absolutePath 属性：选择图片时，使用 absolutePath 属性指定图片的绝对路径，而不是 tempFilePath 属性。

uni.chooseMedia({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  absolutePath: true,
  success: function (res) {
    // 获取选中的图片
    var tempFilePaths = res.tempFilePaths;
  }
});

4. 优化图片上传性能

图片上传时，以下方法可优化上传性能：

压缩图片： 上传前对图片进行压缩，减小图片大小。
分片上传： 对于大图片，可将其分片上传。
使用 CDN 加速： CDN 可以加速图片下载速度，提升上传性能。

5. 常见问题解答

1. 如何在小程序中预览图片？

wx.previewImage({
  urls: ['图片地址']
});

2. 如何在 uni-app 中裁剪图片？

uni.getImageInfo({
  src: '图片地址',
  success: function (res) {
    uni.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      aspectRadio: 1,
      success: function (res) {
        // 获取裁剪后的图片
        var tempFilePaths = res.tempFilePaths;
      }
    });
  }
});

3. 如何获取图片的 base64 数据？

uni.getFileSystemManager().readFile({
  filePath: '图片地址',
  encoding: 'base64',
  success: function (res) {
    // 获取图片的 base64 数据
    var base64Data = res.data;
  }
});

4. 如何上传图片到服务器？

uni.uploadFile({
  url: '服务器地址',
  filePath: '图片地址',
  name: '图片字段名称',
  success: function (res) {
    // 上传成功
  }
});

5. 如何在 uni-app 中旋转图片？

uni.getImageInfo({
  src: '图片地址',
  success: function (res) {
    uni.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      rotate: 90,
      success: function (res) {
        // 获取旋转后的图片
        var tempFilePaths = res.tempFilePaths;
      }
    });
  }
});