美文网首页
H5 Android文件上传

H5 Android文件上传

作者: EasyNetCN | 来源:发表于2020-06-17 18:11 被阅读0次

直接利用file input实现上传,浏览器和Android下都可以正常使用

基于vue的头像上传

<div class="portrait text-right">
        <input ref="portrait" type="file" class="my-file" @change="handlePortraitChange" />
        <img :src="userPortrait" class="my-file-img" />
</div>
   handlePortraitChange(e) {
      if (null != e.target.files && e.target.files.length > 0) {
        let postFiles = Array.prototype.slice.call(e.target.files);
        let file = postFiles.slice(0, 1)[0];

        let params = {
          fileType: 10,
          prefix: "doctor/portrait",
          sourceFile: file.name,
          sourceFileSize: file.size
        };

        api
          .getUploadToken(params)
          .then(response => {
            let uploadParams = {
              OSSAccessKeyId: response.accessKeyId,
              policy: response.policy,
              signature: response.signature,
              key: response.key,
              success_action_status: "200"
            };

            let fileUrl = response.url;

            ajax({
              headers: {},
              withCredentials: false,
              file: file,
              data: uploadParams,
              filename: "file",
              action: response.uploadUrl,
              onProgress: progress => {},
              onSuccess: res => {
                this.userPortrait = fileUrl;
              },
              onError: (err, res) => {
                console.log(err);
              }
            });
          })
          .catch(error => {
            console.log(error);
          });
      }

      this.$refs.portrait.value = null;
    }

Android 授权并选择文件

private ValueCallback<Uri[]> mFilePathCallback;

webView.registerHandler("upImage", new BridgeHandler() {
            @Override
            public void handler(String data, CallBackFunction function) {
                new RxPermissions(WebViewActivity.this).request(PermissionsUtils.getCameraAndStorage())
                        .subscribe(granted -> {
                            if (granted) {
                                mCallBackFunction = function;
                                pickImage(WebViewActivity.this, TAKE_PHOTO);
                            } else {
                                ToastUtils.showToast(WebViewActivity.this, "请同意权限");
                            }
                        });

            }
        });

自定义文件选

public static void pickImage(final Activity context, final int requestCode) {
        CustomAlertDialog dialog = new CustomAlertDialog(context);
        dialog.setTitle("选择图片");
        dialog.addItem(context.getString(com.netease.nim.uikit.R.string.input_panel_take), () -> takePhoto(context, requestCode));
        dialog.addItem(context.getString(com.netease.nim.uikit.R.string.choose_from_photo_album),
                () -> selectImageFromAlbum(context, requestCode));
        dialog.show();
    }

拍照

private static void takePhoto(Activity activity, int requestCode) {
        ImagePickerOption option = DefaultImagePickerOption.getInstance();
        option.setPickType(ImagePickerOption.PickType.Image).setShowCamera(true).setMultiMode(false).setSelectMax(1)
                .setCrop(false);
        ImagePicker.getInstance().setOption(option);
        Intent takePictureIntent = new Intent(activity, ImageTakeActivity.class);
        activity.startActivityForResult(takePictureIntent, requestCode);
    }

从相册选择

 protected static void selectImageFromAlbum(Activity activity, int requestCode) {
        ImagePickerOption option = DefaultImagePickerOption.getInstance().setCrop(true);
        option.setPickType(ImagePickerOption.PickType.Image).setMultiMode(false).setSelectMax(1).setShowCamera(false).setCrop(false);
        ImagePickerLauncher.selectImage(activity, requestCode, option);
    }

回调给H5 file input

@Override
    public void onActivityResult(int requestCode, int resultCode, Intent intent) {
        super.onActivityResult(requestCode, resultCode, intent);
        if (resultCode != RESULT_OK) {
            return;
        }
        switch (requestCode) {
            case TAKE_PHOTO: {
                ArrayList<GLImage> glImage = (ArrayList<GLImage>) intent.getSerializableExtra(Constants.EXTRA_RESULT_ITEMS);

                mFilePathCallback.onReceiveValue(new Uri[]{Uri.parse("file://"+glImage.get(0).getPath())});
                mFilePathCallback = null;

                break;
            }
        }
    }

相关文章

网友评论

      本文标题:H5 Android文件上传

      本文链接:https://www.haomeiwen.com/subject/hyosxktx.html