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 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);

可以根据需要选择合适的使用方式，对代码进行封装使用。

注意：

以上这样使用还有个问题，你会发现如果传字符串参数，后台接收到的会自动加上双引号。这个问题是Retrofit的@PartMap 标注导致的。

要解决的话，两步操作

1. 把@PartMap标注的HashMap paramsMap
   改为里的Object改为RequestBody。

2. 另外paramsMap需要做下转换：

//这一步处理是为了去掉@PartMap标注导致自动加上的双引号
HashMap<String, RequestBody> map = new HashMap<>();
for (HashMap.Entry<String, Object> entry : paramsMap.entrySet()) {
    map.put(entry.getKey(), RequestBody.create(null, String.valueOf(entry.getValue())));
}

使用转换后的map即可解决双引号问题。