这是"带改造的图像上传"系列的第二篇教程。
在第一个教程中，我们将在本地主机上设置NodeJS服务器。
在继续设置NodeJS服务器之前，请参考本教程。
在本教程中，我们将实现图片上传，同时在我们的android应用程序中显示上传进度。

改造多部分图像上传进度

希望您已经在上一教程中成功设置了Node JS服务器。
为了了解上传进度，我们将使用OkHttp。

OkHttp在拦截请求和响应调用方面非常方便。
它有许多可用的食谱：OkHttp食谱

我们将改编其中一种食谱(进度)，以处理和显示上载进度。

下面给出了ProgressRequestBody.java的代码：

package com.theitroad.androiduploadimageretrofitnodejs;

import android.os.Handler;
import android.os.Looper;

import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;

import okhttp3.MediaType;
import okhttp3.RequestBody;
import okio.BufferedSink;

public class ProgressRequestBody extends RequestBody {
  private File mFile;
  private UploadCallbacks mListener;

  private static final int DEFAULT_BUFFER_SIZE = 2048;

  public interface UploadCallbacks {
      void onProgressUpdate(int percentage);

      void onError();

      void onFinish();

      void uploadStart();
  }

  public ProgressRequestBody(final File file, final UploadCallbacks listener) {

      mFile = file;
      mListener = listener;
      mListener.uploadStart();
  }

  @Override
  public MediaType contentType() {
      //i want to upload only images
      return MediaType.parse("image/*");
  }

  @Override
  public long contentLength() throws IOException {
      return mFile.length();
  }

  @Override
  public void writeTo(BufferedSink sink) throws IOException {
      long fileLength = mFile.length();
      byte[] buffer = new byte[DEFAULT_BUFFER_SIZE];
      FileInputStream in = new FileInputStream(mFile);
      long uploaded = 0;

      try {
          int read;
          Handler handler = new Handler(Looper.getMainLooper());
          while ((read = in.read(buffer)) != -1) {
              uploaded += read;
              sink.write(buffer, 0, read);
              handler.post(new ProgressUpdater(uploaded, fileLength));
          }
      } finally {
          in.close();
      }
  }

  private class ProgressUpdater implements Runnable {
      private long mUploaded;
      private long mTotal;

      public ProgressUpdater(long uploaded, long total) {
          mUploaded = uploaded;
          mTotal = total;
      }

      @Override
      public void run() {
          try {

              int progress = (int) (100 * mUploaded/mTotal);

              if (progress == 100)
                  mListener.onFinish();

              else
                  mListener.onProgressUpdate(progress);
          } catch (ArithmeticException e) {
              mListener.onError();
              e.printStackTrace();
          }
      }
  }
}

在上面的代码中，我们定义了" UploadCallback"接口，该接口将在MainActivity.java中实现，并使用在不同事件上触发的方法。

在writeTo函数内部，我们计算上传的字节数。
每次，它都调用一个可运行的类，在该类中我们通过计算进度(基于当前的上传长度和文件长度(以字节为单位))来触发回调方法。

现在我们的OKHttp RequestBody已经准备好了，我们可以将其集成到改造调用中的MainActivity中。

代码

下面给出了activity_main.xml布局的代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="https://schemas.android.com/apk/res/android"
  xmlns:app="https://schemas.android.com/apk/res-auto"
  xmlns:dpv="https://schemas.android.com/apk/res-auto"
  xmlns:tools="https://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:fitsSystemWindows="true">

  <RelativeLayout
      android:id="@+id/content_main"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:padding="16dp"
      app:layout_behavior="@string/appbar_scrolling_view_behavior">

      <TextView
          android:id="@+id/textView"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_centerHorizontal="true"
          android:gravity="center"
          android:textAppearance="@style/TextAppearance.AppCompat.Display1" 

      <ImageView
          android:id="@+id/imageView"
          android:layout_width="250dp"
          android:layout_height="250dp"
          android:layout_centerInParent="true"
          android:adjustViewBounds="true"
          android:scaleType="centerCrop" 

  </RelativeLayout>

  <android.support.design.widget.FloatingActionButton
      android:id="@+id/fab"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="bottom|end"
      android:layout_margin="16dp"
      app:srcCompat="@android:drawable/ic_menu_camera" 

  <FrameLayout
      android:id="@+id/frameLayout"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="bottom|center_horizontal">

      <android.support.design.widget.FloatingActionButton
          android:id="@+id/fabUpload"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_margin="16dp"
          app:srcCompat="@drawable/ic_file_upload" 

  </FrameLayout>

</android.support.design.widget.CoordinatorLayout>

我们将fabUpload视图封装在FrameLayout中，因为由于布局锚点，Android支持设计库不允许切换CoordinatorLayout中存在的FloatingActionButton的可见性。

ApiService的代码与上一教程中的代码相同：

MainActivity.java的代码如下：

package com.theitroad.androiduploadimageretrofitnodejs;

import android.annotation.TargetApi;
import android.app.Activity;
import android.content.ComponentName;
import android.content.DialogInterface;
import android.content.Intent;
import android.content.pm.PackageManager;
import android.content.pm.ResolveInfo;
import android.database.Cursor;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.net.Uri;
import android.os.Build;
import android.os.Parcelable;
import android.provider.MediaStore;
import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import okhttp3.MediaType;
import okhttp3.MultipartBody;
import okhttp3.OkHttpClient;
import okhttp3.RequestBody;
import okhttp3.ResponseBody;
import retrofit2.Call;
import retrofit2.Callback;
import retrofit2.Response;
import retrofit2.Retrofit;

import static android.Manifest.permission.CAMERA;
import static android.Manifest.permission.READ_EXTERNAL_STORAGE;
import static android.Manifest.permission.WRITE_EXTERNAL_STORAGE;
import static android.view.View.GONE;

public class MainActivity extends AppCompatActivity implements View.OnClickListener, ProgressRequestBody.UploadCallbacks {

  ApiService apiService;
  Uri picUri;
  private ArrayList<String> permissionsToRequest;
  private ArrayList<String> permissionsRejected = new ArrayList<>();
  private ArrayList<String> permissions = new ArrayList<>();
  private final static int ALL_PERMISSIONS_RESULT = 107;
  private final static int IMAGE_RESULT = 200;
  FloatingActionButton fabCamera, fabUpload;
  Bitmap mBitmap;
  TextView textView;
  byte[] byteArray;
  FrameLayout frameLayout;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);

      fabCamera = findViewById(R.id.fab);
      fabUpload = findViewById(R.id.fabUpload);
      textView = findViewById(R.id.textView);
      frameLayout = findViewById(R.id.frameLayout);

      fabCamera.setOnClickListener(this);
      fabUpload.setOnClickListener(this);

      askPermissions();
  }

  private void askPermissions() {
      permissions.add(CAMERA);
      permissions.add(WRITE_EXTERNAL_STORAGE);
      permissions.add(READ_EXTERNAL_STORAGE);
      permissionsToRequest = findUnAskedPermissions(permissions);

      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {

          if (permissionsToRequest.size() > 0)
              requestPermissions(permissionsToRequest.toArray(new String[permissionsToRequest.size()]), ALL_PERMISSIONS_RESULT);
      }
  }

  private void initRetrofitClient() {
      OkHttpClient client = new OkHttpClient.Builder().build();

      //change the ip to yours.
      apiService = new Retrofit.Builder().baseUrl("https://172.20.10.3:3000").client(client).build().create(ApiService.class);
  }

  public Intent getPickImageChooserIntent() {

      Uri outputFileUri = getCaptureImageOutputUri();

      List<Intent> allIntents = new ArrayList<>();
      PackageManager packageManager = getPackageManager();

      Intent captureIntent = new Intent(android.provider.MediaStore.ACTION_IMAGE_CAPTURE);
      List<ResolveInfo> listCam = packageManager.queryIntentActivities(captureIntent, 0);
      for (ResolveInfo res : listCam) {
          Intent intent = new Intent(captureIntent);
          intent.setComponent(new ComponentName(res.activityInfo.packageName, res.activityInfo.name));
          intent.setPackage(res.activityInfo.packageName);
          if (outputFileUri != null) {
              intent.putExtra(MediaStore.EXTRA_OUTPUT, outputFileUri);
          }
          allIntents.add(intent);
      }

      Intent galleryIntent = new Intent(Intent.ACTION_GET_CONTENT);
      galleryIntent.setType("image/*");
      List<ResolveInfo> listGallery = packageManager.queryIntentActivities(galleryIntent, 0);
      for (ResolveInfo res : listGallery) {
          Intent intent = new Intent(galleryIntent);
          intent.setComponent(new ComponentName(res.activityInfo.packageName, res.activityInfo.name));
          intent.setPackage(res.activityInfo.packageName);
          allIntents.add(intent);
      }

      Intent mainIntent = allIntents.get(allIntents.size() - 1);
      for (Intent intent : allIntents) {
          if (intent.getComponent().getClassName().equals("com.android.documentsui.DocumentsActivity")) {
              mainIntent = intent;
              break;
          }
      }
      allIntents.remove(mainIntent);

      Intent chooserIntent = Intent.createChooser(mainIntent, "Select source");
      chooserIntent.putExtra(Intent.EXTRA_INITIAL_INTENTS, allIntents.toArray(new Parcelable[allIntents.size()]));

      return chooserIntent;
  }

  private Uri getCaptureImageOutputUri() {
      Uri outputFileUri = null;
      File getImage = getExternalFilesDir("");
      if (getImage != null) {
          outputFileUri = Uri.fromFile(new File(getImage.getPath(), "profile.png"));
      }
      return outputFileUri;
  }

  @Override
  protected void onActivityResult(int requestCode, int resultCode, Intent data) {

      if (resultCode == Activity.RESULT_OK) {

          ImageView imageView = findViewById(R.id.imageView);

          if (requestCode == IMAGE_RESULT) {

              String filePath = getImageFilePath(data);
              if (filePath != null) {
                  frameLayout.setVisibility(GONE);
                  mBitmap = BitmapFactory.decodeFile(filePath);
                  getByteArrayInBackground();
                  imageView.setImageBitmap(mBitmap);

              }
          }

      }

  }

  private void getByteArrayInBackground() {

      Thread thread = new Thread() {
          @Override
          public void run() {
              ByteArrayOutputStream bos = new ByteArrayOutputStream();
              mBitmap.compress(Bitmap.CompressFormat.PNG, 0, bos);
              byteArray = bos.toByteArray();

              runOnUiThread(new Runnable() {
                  @Override
                  public void run() {
                      frameLayout.setVisibility(View.VISIBLE);
                  }
              });

          }
      };
      thread.start();
  }

  private String getImageFromFilePath(Intent data) {
      boolean isCamera = data == null || data.getData() == null;

      if (isCamera) return getCaptureImageOutputUri().getPath();
      else return getPathFromURI(data.getData());

  }

  public String getImageFilePath(Intent data) {
      return getImageFromFilePath(data);
  }

  private String getPathFromURI(Uri contentUri) {
      String[] proj = {MediaStore.Audio.Media.DATA};
      Cursor cursor = getContentResolver().query(contentUri, proj, null, null, null);
      int column_index = cursor.getColumnIndexOrThrow(MediaStore.Audio.Media.DATA);
      cursor.moveToFirst();
      return cursor.getString(column_index);
  }

  @Override
  protected void onSaveInstanceState(Bundle outState) {
      super.onSaveInstanceState(outState);

      outState.putParcelable("pic_uri", picUri);
  }

  @Override
  protected void onRestoreInstanceState(Bundle savedInstanceState) {
      super.onRestoreInstanceState(savedInstanceState);

      //get the file url
      picUri = savedInstanceState.getParcelable("pic_uri");
  }

  private ArrayList<String> findUnAskedPermissions(ArrayList<String> wanted) {
      ArrayList<String> result = new ArrayList<String>();

      for (String perm : wanted) {
          if (!hasPermission(perm)) {
              result.add(perm);
          }
      }

      return result;
  }

  private boolean hasPermission(String permission) {
      if (canMakeSmores()) {
          if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
              return (checkSelfPermission(permission) == PackageManager.PERMISSION_GRANTED);
          }
      }
      return true;
  }

  private void showMessageOKCancel(String message, DialogInterface.OnClickListener okListener) {
      new AlertDialog.Builder(this)
              .setMessage(message)
              .setPositiveButton("OK", okListener)
              .setNegativeButton("Cancel", null)
              .create()
              .show();
  }

  private boolean canMakeSmores() {
      return (Build.VERSION.SDK_INT > Build.VERSION_CODES.LOLLIPOP_MR1);
  }

  @TargetApi(Build.VERSION_CODES.M)
  @Override
  public void onRequestPermissionsResult(int requestCode, String[] permissions, int[] grantResults) {

      switch (requestCode) {

          case ALL_PERMISSIONS_RESULT:
              for (String perms : permissionsToRequest) {
                  if (!hasPermission(perms)) {
                      permissionsRejected.add(perms);
                  }
              }

              if (permissionsRejected.size() > 0) {

                  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
                      if (shouldShowRequestPermissionRationale(permissionsRejected.get(0))) {
                          showMessageOKCancel("These permissions are mandatory for the application. Please allow access.",
                                  new DialogInterface.OnClickListener() {
                                      @Override
                                      public void onClick(DialogInterface dialog, int which) {
                                          requestPermissions(permissionsRejected.toArray(new String[permissionsRejected.size()]), ALL_PERMISSIONS_RESULT);
                                      }
                                  });
                          return;
                      }
                  }

              }

              break;
      }

  }

  private void multipartImageUpload() {

      initRetrofitClient();

      try {

          if (byteArray != null) {
              File filesDir = getApplicationContext().getFilesDir();
              File file = new File(filesDir, "image" + ".png");

              FileOutputStream fos = new FileOutputStream(file);
              fos.write(byteArray);
              fos.flush();
              fos.close();

              textView.setTextColor(Color.BLUE);

              ProgressRequestBody fileBody = new ProgressRequestBody(file, this);
              MultipartBody.Part body = MultipartBody.Part.createFormData("upload", file.getName(), fileBody);
              RequestBody name = RequestBody.create(MediaType.parse("text/plain"), "upload");

              Call<ResponseBody> req = apiService.postImage(body, name);
              req.enqueue(new Callback<ResponseBody>() {
                  @Override
                  public void onResponse(Call<ResponseBody> call, Response<ResponseBody> response) {
                      Toast.makeText(getApplicationContext(), response.code() + " ", Toast.LENGTH_SHORT).show();
                  }

                  @Override
                  public void onFailure(Call<ResponseBody> call, Throwable t) {
                      textView.setText("Uploaded Failed!");
                      textView.setTextColor(Color.RED);
                      Toast.makeText(getApplicationContext(), "Request failed", Toast.LENGTH_SHORT).show();
                      t.printStackTrace();
                  }
              });
          }

      } catch (FileNotFoundException e) {
          e.printStackTrace();
      } catch (IOException e) {
          e.printStackTrace();
      }
  }

  @Override
  public void onClick(View view) {
      switch (view.getId()) {
          case R.id.fab:
              startActivityForResult(getPickImageChooserIntent(), IMAGE_RESULT);
              break;

          case R.id.fabUpload:
              if (mBitmap != null)
                  multipartImageUpload();
              else {
                  Toast.makeText(getApplicationContext(), "Bitmap is null. Try again", Toast.LENGTH_SHORT).show();
              }
              break;
      }
  }

  @Override
  public void onProgressUpdate(int percentage) {
      textView.setText(percentage + "%");
  }

  @Override
  public void onError() {
      textView.setText("Uploaded Failed!");
      textView.setTextColor(Color.RED);
  }

  @Override
  public void onFinish() {
      textView.setText("Uploaded Successfully");
  }

  @Override
  public void uploadStart() {
      textView.setText("0%");
      Toast.makeText(getApplicationContext(), "Upload started", Toast.LENGTH_SHORT).show();
  }
}

在上面的代码中，我们使用了运行时权限，并使用FileProvider从相机和图库捕获图像。
考虑到重要的区别，我们对代码进行了优化，以使从Bitmap创建的字节数组在后台线程中完成，以防止UI线程冻结。
实现了" UploadCallbacks"界面，并且在上传图片时，文本视图会更新其值。