Android JS图片上传功能如何使用？

在Android开发中，使用JavaScript（通常通过WebView或React Native等框架）与Java/Kotlin进行交互来实现图片上传是一个常见的需求，以下是详细的步骤和代码示例：

一、前提条件

1、添加权限：确保在AndroidManifest.xml文件中添加了必要的权限，如相机权限和存储权限。

2、引入依赖：如果使用第三方库（如Glide、OkHttp等），请确保在项目的build.gradle文件中添加了相应的依赖。

二、详细步骤

选择图片

系统相册选择：可以通过Intent启动系统相册，让用户选择图片。

// 启动系统相册
Intent intent = new Intent(Intent.ACTION_PICK, MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
startActivityForResult(intent, REQUEST_IMAGE_PICKER);

拍照获取：调用相机API进行拍照，并保存图片到本地。

// 检查是否已经获得了相机权限
if (ContextCompat.checkSelfPermission(thisActivity, Manifest.permission.CAMERA) != PackageManager.PERMISSION_GRANTED) {
    // 如果没有获得权限，请求权限
    ActivityCompat.requestPermissions(thisActivity, new String[]{Manifest.permission.CAMERA}, MY_PERMISSIONS_REQUEST_CAMERA);
} else {
    // 已有权限，启动相机
    Intent takePictureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
    if (takePictureIntent.resolveActivity(getPackageManager()) != null) {
        startActivityForResult(takePictureIntent, REQUEST_CODE_FROM_CAMERA);
    }
}

压缩图片

为了减小图片的大小和上传时间，通常需要对图片进行压缩。

// 压缩图片
Bitmap compressedBitmap = Bitmap.createScaledBitmap(originalBitmap, maxWidth, maxHeight, true);

上传图片

使用HTTP协议（如HttpURLConnection或OkHttp）将图片上传到服务器。

// 创建URL对象
URL url = new URL(uploadUrl);
// 创建HttpURLConnection对象并设置请求方法和超时时间
HttpURLConnection connection = (HttpURLConnection) url.openConnection();
connection.setRequestMethod("POST");
connection.setReadTimeout(5000);
connection.setConnectTimeout(5000);
connection.setDoOutput(true);
// 设置请求头
connection.setRequestProperty("Content-Type", "multipart/form-data; boundary=" + boundary);
// 获取输出流
OutputStream outputStream = connection.getOutputStream();
BufferedWriter writer = new BufferedWriter(new OutputStreamWriter(outputStream));
// 写入文件数据
writer.write("--" + boundary + "
");
writer.write("Content-Disposition: form-data; name="file"; filename="" + fileName + ""
");
writer.write("Content-Type: application/octet-stream
");
writer.write("
");
writer.flush();
// 将图片写入输出流
compressedBitmap.compress(Bitmap.CompressFormat.JPEG, 100, outputStream);
outputStream.flush();
// 写入结束标志
writer.write("
--" + boundary + "--
");
writer.flush();
// 获取服务器返回的结果
int responseCode = connection.getResponseCode();
if (responseCode == HttpURLConnection.HTTP_OK) {
    // 处理上传成功的逻辑
} else {
    // 处理上传失败的逻辑
}
// 关闭连接和输出流
writer.close();
outputStream.close();
connection.disconnect();

显示图片

在图片上传完成后，可以使用ImageView控件或第三方库（如Glide）来加载和显示图片。

// 加载图片并显示到ImageView控件
Glide.with(context)
    .load(imageUrl)
    .into(imageView);

步骤	描述	代码示例
选择图片	启动系统相册或相机让用户选择或拍摄图片	Intent intent = new Intent(Intent.ACTION_PICK, MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
压缩图片	使用Bitmap类的方法对图片进行压缩	Bitmap compressedBitmap = Bitmap.createScaledBitmap(originalBitmap, maxWidth, maxHeight, true);
上传图片	使用HttpURLConnection或第三方库将图片上传到服务器	URL url = new URL(uploadUrl); // 创建URL对象
显示图片	使用ImageView控件或第三方库加载并显示图片	Glide.with(context).load(imageUrl).into(imageView);

四、相关问题与解答

1. 如何确保应用具有访问相机和存储的权限？

答：在AndroidManifest.xml文件中添加以下权限声明：

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

并在运行时动态请求这些权限（如果目标SDK版本大于等于23）：

if (ContextCompat.checkSelfPermission(thisActivity, Manifest.permission.CAMERA) != PackageManager.PERMISSION_GRANTED ||
    ContextCompat.checkSelfPermission(thisActivity, Manifest.permission.READ_EXTERNAL_STORAGE) != PackageManager.PERMISSION_GRANTED ||
    ContextCompat.checkSelfPermission(thisActivity, Manifest.permission.WRITE_EXTERNAL_STORAGE) != PackageManager.PERMISSION_GRANTED) {
    ActivityCompat.requestPermissions(thisActivity, new String[]{Manifest.permission.CAMERA, Manifest.permission.READ_EXTERNAL_STORAGE, Manifest.permission.WRITE_EXTERNAL_STORAGE}, PERMISSIONS_REQUEST_CODE);
}

处理权限请求结果：

@Override
public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
    super.onRequestPermissionsResult(requestCode, permissions, grantResults);
    if (requestCode == PERMISSIONS_REQUEST_CODE) {
        if (grantResults.length > 0 && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
            // 权限被授予，可以进行下一步操作
        } else {
            // 权限被拒绝，提示用户并可能引导至设置页面开启权限
        }
    }
}

2. 如何处理图片上传过程中的网络异常或服务器错误？

答：在上传图片时，应捕获可能的异常并进行处理，可以使用try-catch块来捕获IOException等异常，根据服务器返回的响应码来判断是否上传成功，并进行相应的处理，如果上传失败，可以提示用户重试或检查网络连接。