Android Retrofit與Spring後臺配合，實現單張、多張圖片上傳功能

前言

最近在學寫後臺接口，想做個圖片上傳接口與Android客戶端配合使用。
Android這邊我用的Retrofit網絡請求框架。

但是發現我把Android這邊寫好了，後臺不知道該怎麼接收；後臺接口定義好了，Android這邊不知道怎麼傳參。網上的資料也基本都是隻講一方面的，不講怎麼配合使用。那麼我自己研究了一下實現了功能，在這裏總結下。

後臺接口

這裏爲了更詳細的說明使用方法，我加了個userId參數，需要客戶端傳入。

//單文件上傳
@PostMapping("/image/uploadUserHeadPhoto")
public BaseResult uploadUserHeadPhoto(@RequestParam("userId") long userId, @RequestParam("photo") MultipartFile photo) {
	// 這裏進行處理
}

//多文件上傳
@PostMapping("/image/uploadRecordPhotoList")
public BaseResult uploadRecordPhotoList(@RequestParam("userId") long userId, @RequestParam("photoList") List<MultipartFile> photoList) {
	// 這裏進行處理
}

Android Retrofit接口：

Android 這裏對單圖上傳和多圖上傳，分別寫了兩個Retrofit接口，爲了說明可以有不同的使用方式。

import okhttp3.MultipartBody;
import okhttp3.ResponseBody;
import retrofit2.Call;
import retrofit2.http.Body;
import retrofit2.http.Field;
import retrofit2.http.Multipart;
import retrofit2.http.POST;
import retrofit2.http.Part;
import retrofit2.http.PartMap;

public interface FileUpload {
    //單文件上傳1
    @Multipart
    @POST("image/uploadUserHeadPhoto")
    Call<ResponseBody> uploadFile(@Part ("userId") long userId, @Part MultipartBody.Part file);
    
    //單文件上傳2
    @Multipart
    @POST("image/uploadUserHeadPhoto")
    Call<ResponseBody> uploadFile(@PartMap HashMap<String, Object> paramsMap, @Part MultipartBody.Part file);

    //多文件上傳1
    @Multipart
    @POST("image/uploadRecordPhotoList")
    Call<ResponseBody> uploadFilesMultipartBodyParts(@PartMap HashMap<String, Object> paramsMap, @Part() List<MultipartBody.Part> parts);

    //多文件上傳2
    @POST("image/uploadRecordPhotoList")
    Call<ResponseBody> uploadFilesMultipartBody(@Body MultipartBody multipartBody);
}

Android 端對Retrofit接口的使用

這裏的示例代碼比較簡單，沒有封裝，實際使用時可封裝成更加通用的工具類。

import java.io.File;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.concurrent.TimeUnit;

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 retrofit2.converter.gson.GsonConverterFactory;

public class FileUploadManager {

    public static final String BASE_URL = "http://192.168.1.1:8888/";

    private static OkHttpClient client = new OkHttpClient.Builder()
            .retryOnConnectionFailure(true)
            .connectTimeout(15, TimeUnit.SECONDS)
            .build();
             
    private static Retrofit retrofit = new Retrofit.Builder()
            .client(client)
            .baseUrl(BASE_URL)
            .addConverterFactory(GsonConverterFactory.create())
            .build();

    /**
     * 單圖上傳1
     * @param userId
     * @param filePath
     */
    public static void uploadFile(long userId, String filePath) {
        FileUpload fileUpload = retrofit.create(FileUpload.class); 
        RequestBody requestFile = RequestBody.create(MediaType.parse("text/plain"), new File(filePath));
        MultipartBody.Part body = MultipartBody.Part.createFormData("photo", "photo", requestFile);

        Call<ResponseBody> call = fileUpload.uploadFile(userId, body);
        call.enqueue(new Callback<ResponseBody>() {
            @Override
            public void onResponse(Call<ResponseBody> call, Response<ResponseBody> response) {
                LogUtils.d("Retrofit", "onResponse:" + response.code() +", "+ response.message());
                if (response.code() == 200) {
                    LogUtils.d("Retrofit", "onResponse ack:" + response.body());
                }
            }

            @Override
            public void onFailure(Call<ResponseBody> call, Throwable t) {
                LogUtils.d("Retrofit", "onFailure");
            }
        });
    }

    /**
     * 單圖上傳2
     * @param map
     * @param filePath
     */
    public static void uploadFile(HashMap<String, Object> map, String filePath) {
        FileUpload fileUpload = retrofit.create(FileUpload.class);
        RequestBody requestFile = RequestBody.create(MediaType.parse("text/plain"), new File(filePath));
        MultipartBody.Part body = MultipartBody.Part.createFormData("photo", "photo", requestFile);

        Call<ResponseBody> call = fileUpload.uploadFile(map, body);
        call.enqueue(new Callback<ResponseBody>() {
            @Override
            public void onResponse(Call<ResponseBody> call, Response<ResponseBody> response) {
                LogUtils.d("Retrofit", "onResponse:" + response.code() +", "+ response.message());
                if (response.code() == 200) {
                    LogUtils.d("Retrofit", "onResponse ack:" + response.body());
                }
            }

            @Override
            public void onFailure(Call<ResponseBody> call, Throwable t) {
                LogUtils.d("Retrofit", "onFailure");
            }
        });
    }

    /**
     * 多圖上傳1
     * @param files
     */
    public static void uploadMultiPartFile(HashMap<String, Object> map, List<File> files) {
        List<MultipartBody.Part> parts = new ArrayList<>(files.size());
        for(File file : files) {
            RequestBody requestBody = RequestBody.create(MediaType.parse("image/png"), file);
            MultipartBody.Part part = MultipartBody.Part.createFormData("photoList", file.getName(), requestBody);
            parts.add(part);
        }

        FileUpload fileUpload = retrofit.create(FileUpload.class);
        Call<ResponseBody> call = fileUpload.uploadFilesMultipartBodyParts(map, parts);
        call.enqueue(new Callback<ResponseBody>() {
            @Override
            public void onResponse(Call<ResponseBody> call, Response<ResponseBody> response) {
                LogUtils.d("Retrofit", "onResponse:" + response.code() +", "+ response.message());
                if (response.code() == 200) {
                    LogUtils.d("Retrofit", "onResponse ack:" + response.body());
                }
            }

            @Override
            public void onFailure(Call<ResponseBody> call, Throwable t) {
                LogUtils.d("Retrofit", "onFailure" + t.getMessage());
            }
        });
    }

    /**
     * 多圖上傳2
     * @param files
     */
    public static void uploadMultipartBodyFile(List<File> files) {
        MultipartBody.Builder builder = new MultipartBody.Builder();
        builder.setType(MultipartBody.FORM);
        for(File file : files) {
            RequestBody requestBody = RequestBody.create(MediaType.parse("image/png"), file);
            builder.addFormDataPart("photoList", file.getName(), requestBody);
        }
        builder.addFormDataPart("userId", "1");
        MultipartBody multipartBody = builder.build(); //List<MultipartBody.Part> parts = builder.build().parts();

        FileUpload fileUpload = retrofit.create(FileUpload.class); //獲取FileUpload的API
        Call<ResponseBody> call = fileUpload.uploadFilesMultipartBody(multipartBody);
        call.enqueue(new Callback<ResponseBody>() {
            @Override
            public void onResponse(Call<ResponseBody> call, Response<ResponseBody> response) {
                LogUtils.d("Retrofit", "onResponse:" + response.code() +", "+ response.message());
                if (response.code() == 200) {
                    LogUtils.d("Retrofit", "onResponse ack:" + response.body());
                }
            }

            @Override
            public void onFailure(Call<ResponseBody> call, Throwable t) {
                LogUtils.d("Retrofit", "onFailure" + t.getMessage());
            }
        });
    }
}

Android 端對上傳圖片接口的調用

String filePath = "/storage/emulated/Pictures/IMG_20200309_18433730.jpeg";
//單張上傳1
FileUploadManager.uploadFile(1, filePath);

//單張上傳2
HashMap<String, Object> paramsMap = new HashMap<>();
paramsMap.put("userId", 1);
FileUploadManager.uploadFile(paramsMap, filePath);

//多張上傳1
List<File> fileList = new ArrayList<>();
fileList.add(new File(filePath));
fileList.add(new File(filePath));
FileUploadManager.uploadMultiPartFile(paramsMap, fileList);

//多張上傳2
FileUploadManager.uploadMultipartBodyFile(fileList);

可以根據需要選擇合適的使用方式，對代碼進行封裝使用。