直接利用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;
}
}
}
网友评论