Uniapp 一键保存所有图片的功能

Uniapp 一键保存所有图片的功能

1. 检查并申请权限

首先，我们需要检查用户是否授予了保存图片到相册的权限，如果没有，则申请权限。

function checkPermission() {
  uni.getSetting({
    success: function(res) {
      if (!res.authSetting['scope.writePhotosAlbum']) {
        uni.authorize({
          scope: 'scope.writePhotosAlbum',
          success: function() {
            console.log('授权成功');
          },
          fail: function() {
            console.log('授权失败');
          }
        });
      }
    }
  });
}

2. 下载所有图片

准备一个图片 URL 的数组，并使用 uni.downloadFile 下载所有图片。

const imageUrls = ['http://example.com/img1.jpg', 'http://example.com/img2.jpg'];

function downloadImages(imageUrls) {
  return imageUrls.map(url => uni.downloadFile({ url }));
}

3. 依次保存图片到相册

下载所有图片后，依次将图片保存到相册。

function saveImagesOneByOne(index, filePaths) {
  if (index >= filePaths.length) return;
  uni.saveImageToPhotosAlbum({
    filePath: filePaths[index],
    success: function() {
      console.log('第' + (index+1) + '张保存成功');
      saveImagesOneByOne(index + 1, filePaths);
    },
    fail: function(err) {
      console.log('第' + (index+1) + '张保存失败', err);
      saveImagesOneByOne(index + 1, filePaths);
    }
  });
}

4. 整合所有步骤

在主函数中整合上述步骤，确保按顺序执行。

function saveAllImages(imageUrls) {
  checkPermission();
  const downloadPromises = downloadImages(imageUrls);
  Promise.all(downloadPromises).then(responses => {
    const filePaths = responses.map(response => response.tempFilePath);
    saveImagesOneByOne(0, filePaths);
  }).catch(err => {
    console.log('下载图片失败', err);
  });
}

5. 调用主函数

在需要的地方调用 saveAllImages 函数。

saveAllImages(imageUrls);

6. 错误处理和优化

• 在每个步骤中添加错误处理，确保程序的健壮性。
• 考虑分批处理图片，以优化性能和用户体验。

7. 真机测试

由于模拟器可能无法保存到相册，建议在真机上进行测试，确保功能正常。