uniapp H5调用本地相册图片后上传

在uniApp中，如果你想要H5页面通过调用用户的本地相册选择图片并上传到服务器，可以按照以下步骤操作：

1. 首先，引入必要的权限管理，确保应用有访问用户照片的权限。在`app.json`文件中添加对`scope.writePhotosAlbum`权限的申请：

{
  "permission": {
    "scope.writePhotosAlbum": {
      "desc": "用于获取您的照片"
    }
  }
}

2. 使用uni-app提供的API `getUserMedia`请求相机和相册权限：

uni.requestPermission({
  permission: 'scope.writePhotosAlbum',
  success(res) {
    if (res.granted) {
      // 用户同意了权限，可以选择图片
      getUserMedia({
        type: 'image',
        success(result) {
          let file = result.tempFilePath; // 获取选中的图片路径
          // 进行上传处理
          uploadImage(file);
        },
        fail(err) {
          console.error('获取图片失败', err);
        }
      });
    } else {
      console.log('用户拒绝了权限');
    }
  },
  fail() {
    console.log('请求权限失败');
  }
});

3. 定义`uploadImage`函数，这里假设你已经有了一个HTTP上传接口：

async function uploadImage(imgPath) {
  const formData = new FormData();
  formData.append('file', uni.uploader.filepond.convertFile(imgPath));

  try {
    await axios.post('/api/upload', formData, {headers: {'Content-Type': 'multipart/form-data'}});
    uni.showToast({message: '图片上传成功'});
  } catch (error) {
    uni.showToast({message: '图片上传失败', errorDescription: error.message});
  }
}

4. 考虑使用uni-app的`uni.uploader`组件配合`filepond`插件来进行更复杂的图片预览、裁剪等操作。

记得在实际项目中检查网络连接以及错误处理，以便提供良好的用户体验。