webview_flutter在H5唤起相机和相册及安卓分区存储问题

Alex_z0897

已于 2024-03-01 20:21:29 修改

阅读量1.5k

点赞数

分类专栏：移动端文章标签： flutter html5

于 2021-05-26 15:25:06 首次发布

本文链接：https://blog.csdn.net/zoeou/article/details/117292693

版权

移动端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

问题一: 使用vant-uploader该组件内使用input file,然而flutter webview_flutter貌似还不支持input选择相册打开相机
vant-uploader
参照了其它人的文章,特地在这里记录下.
https://blog.csdn.net/kameleon2013/article/details/109104531
https://blog.csdn.net/chjqxxxx/article/details/52724983
下载最新 webview_flutter插件版本,加入相册选择,相机拍照,本地编译之后,完美解决

问题二: 拍照后H5端没反应（用户已授权）,未接收到文件

Android：WebView里调用相机/文件选取照片并上传
https://www.jianshu.com/p/232e0df0936f

Android 10 分区存储完全解析
https://blog.csdn.net/wanliguodu/article/details/120297395

重新梳理整个流程,

flutter --version
Flutter 3.11.0-12.0.pre • channel master 
Framework • revision 216605b60f (9 months ago) • 2023-05-23 23:40:27 -0400
Engine • revision eebcf36cd3
Tools • Dart 3.1.0 (build 3.1.0-139.0.dev) • DevTools 2.23.1

webview使用是的老版本
webview_flutter: 2.0.7

追加针对Android 分区存储机制处理:

  private Intent createCameraIntent() {
      Intent cameraIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) { // 判断是否为Android 10及以上
        ContentValues contentValues = new ContentValues();
        contentValues.put(MediaStore.MediaColumns.DISPLAY_NAME, "IMG_" + System.currentTimeMillis() + ".jpg");
        contentValues.put(MediaStore.MediaColumns.MIME_TYPE, "image/jpeg");
        contentValues.put(MediaStore.Images.Media.RELATIVE_PATH, 
                         Environment.DIRECTORY_PICTURES);
        ContentResolver resolver = WebViewFlutterPlugin.activity.getContentResolver();;
        mCameraFilePath = resolver.insert(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, contentValues);
        cameraIntent.putExtra(MediaStore.EXTRA_OUTPUT, mCameraFilePath);
    } else {
        String filePath = Environment.getExternalStorageDirectory() + File.separator
              + Environment.DIRECTORY_PICTURES + File.separator;
        String fileName = "IMG_" + System.currentTimeMillis() +".jpg";
        mCameraFilePath = Uri.fromFile(new File(filePath + fileName));
        cameraIntent.putExtra(MediaStore.EXTRA_OUTPUT, mCameraFilePath);
      }
      return cameraIntent;
  }


@TargetApi(Build.VERSION_CODES.LOLLIPOP)
  private void onActivityResultAboveL(int requestCode, int resultCode, Intent intent) {
    if (requestCode != FILE_CHOOSER_RESULT_CODE || uploadMessageAboveL == null){
      return;
    }
    Uri[] results = null;
    if (resultCode == Activity.RESULT_OK) {
      if (intent != null) {//文件中选图片
        String dataString = intent.getDataString();
        ClipData clipData = intent.getClipData();
        if (clipData != null) {
          results = new Uri[clipData.getItemCount()];
          for (int i = 0; i < clipData.getItemCount(); i++) {
            ClipData.Item item = clipData.getItemAt(i);
            results[i] = item.getUri();
          }
        }
        if (dataString != null) {
          Log.v(TAG,"文件中获取: "+ dataString);
          results = new Uri[]{Uri.parse(dataString)};
        }
      }else{// 从相机获取
        updatePhotos();
        Log.v(TAG,"从相机获取: "+ mCameraFilePath.toString());
        results = new Uri[]{mCameraFilePath};
      }
    }
    if (results == null) {
      uploadMessageAboveL.onReceiveValue(null);
    } else {
      for (Uri uri : results) {
        Log.v(TAG, String.format("Url: host: %s, path: %s, uri: %s",uri.getHost(),uri.getPath() ,uri));
      }
      uploadMessageAboveL.onReceiveValue(results);
    }
    uploadMessageAboveL = null;
  }
   /**
   * 广播,唤醒系统刷新媒体文件
   */
  private void updatePhotos() {
    Intent intent = new Intent(Intent.ACTION_MEDIA_SCANNER_SCAN_FILE);
    intent.setData(mCameraFilePath);
    WebViewFlutterPlugin.activity.sendBroadcast(intent);
  }