Android用Retrofit 2实现多文件上传实战

前一段时间我翻译了Future Studio的Retrofit2教程，从中也学习到了一些Retrofit2的使用方法，如果你最近也打算入手学习，我博客上Retrofit教程，你也许可以参考下：Retrofit教程 。

本文作为阶段性小结，将使用结合Python中的Flask框架实现Android端多文件上传功能。如果读者没有使用过Python中的Flask也没有关系，可以只看Android客户端部分，毕竟客户端工程师只使用API也是可以的。

1.实验效果

Android端操作截图

Server端接收到的图片

2. Server端实战

Server端负责接收保存客户端上传来的图片并提供访问图片的能力，Server有很多技术可以实现，Python作为一门具有强大的第三方库的语言，拥有很多web服务框架，如Flask,Django等。笔者采用Flask框架，Flask是微框架，实现小型功能十分方便，笔者实现的多文件上传功能，程序不超过30行。

下面具体来看看。

2.1 环境安装

笔者使用的Python版本为3.4，可以去 Python3.4下载 选择下载适合自己系统的版本。完整安装Python教程请自行搜索。

Python安装完成后需要安装Server端程序依赖库。通过pip安装：

1. pip install Flask 
2. pip install werkzeug  

2.2 程序实现

首先要引入依赖库：

1. from flask import Flask,request,send_from_directory,jsonify 
2. import os 
3. from werkzeug import secure_filename  

本实验需要上传文件，需要将所上传文件的文件类型以及文件名做出限制，防止某些破坏服务器的程序运行，另外有些非法文件名如：

filename = "../../../../home/username/.bashrc"

如果黑客们能够操作这样的文件，对服务器系统来说，将是致命打击。所以werkzeug提供了secure_filename对上传文件的文件名进行合法校验。

判断文件后缀是否合法

1. ALLOWED_EXTENSIONS=set(['png','jpg','jpeg','gif']) 
2. def allowed_file(filename): 
3. return '.' in filename and filename.rsplit('.',1)[1] in ALLOWED_EXTENSIONS  

接收上传文件的函数代码如下：

1. @app.route('/upload',methods=['POST']) 
2. def upload_file(): 
3. if request.method=='POST': 
4. for k in request.files: 
5. file = request.files[k] 
6. image_urls = [] 
7. if file and allowed_file(file.filename): 
8. filename=secure_filename(file.filename) 
9. file.save(os.path.join(app.config['IMAGE_FOLDER'],filename)) 
10. image_urls.append("images/%s"%filename) 
11. return jsonify({"code":1,"image_urls":image_urls})  

Flask支持GET,POST,PUT,DELETE等HTTP请求方式，使用装饰器进行修饰，类似于Java中的注解概念，/upload为客户端请求的相对地址，请求方式限制为POST.根据request内置对象，可以访问客户端发来的文件，将文件检查后保存在本地，其中image_urls为上传后的图片的相对地址数组。最后将图片的地址以json格式返回给客户端。

完整的Server端代码如下：

1. from flask import Flask,request,send_from_directory,jsonify 
2.  import os 
3.  from werkzeug import secure_filename 
4.  
5. app = Flask(__name__) 
6.  app.config['IMAGE_FOLDER'] = os.path.abspath('.')+'\\images\\' 
7.  ALLOWED_EXTENSIONS=set(['png','jpg','jpeg','gif']) 
8.  
9. def allowed_file(filename): 
10.  return '.' in filename and filename.rsplit('.',1)[1] in ALLOWED_EXTENSIONS 
11.  
12. @app.route('/upload',methods=['POST']) 
13.  def upload_file(): 
14.  if request.method=='POST': 
15.  for k in request.files: 
16.  file = request.files[k] 
17.  print(file) 
18.  image_urls = [] 
19.  if file and allowed_file(file.filename): 
20.  filename=secure_filename(file.filename) 
21.  file.save(os.path.join(app.config['IMAGE_FOLDER'],filename)) 
22.  image_urls.append("images/%s"%filename) 
23.  return jsonify({"code":1,"image_urls":image_urls}) 
24.  
25. #让文件映射访问，否则默认只能访问static文件夹中的文件 
26.  @app.route("/images/<imgname>",methods=['GET']) 
27.  def images(imgname): 
28.  return send_from_directory(app.config['IMAGE_FOLDER'],imgname) 
29.  
30. if __name__ == "__main__": 
31.  
32. # 检测 IMAGE_FOLDER 是否存在 
33.  if not os.path.exists(app.config['IMAGE_FOLDER']): 
34.  os.mkdir(app.config['IMAGE_FOLDER']) 
35.  app.run("192.168.1.102",debug=True)  

这里有一个小技巧，写完Server端代码后可以使用Postman进行测试，测试成功后再进行客户端程序开发。

3. 客户端开发

因为涉及文件的上传，笔者这里以图片为例进行上传实验，图片上传除了重头戏Retrofit之外，还需要选择图片，笔者这里推荐一个模仿微信的图片选择库 ImagePicker .

3.1 添加依赖库

图片加载库笔者喜欢使用Glide

1. compile 'com.squareup.retrofit2:retrofit:2.1.0' 
2. compile 'com.squareup.retrofit2:converter-gson:2.1.0' 
3. compile 'com.github.bumptech.glide:glide:3.7.0' 
4. compile 'com.lzy.widget:imagepicker:0.4.1'  

3.2 程序实现

如果没有接触过Retrofit 2，可以来我的博客Retrofit教程 了解。

Retrofit2 是一个支持RESTful API的请求库，实际上只是对API请求方式的封装，真正的网络请求由OkHttp发出。

Retrofit2一般会定义一个ServiceGenerator类，用于动态生成Retrofit对象。

1. public class ServiceGenerator { 
2. public static final String API_BASE_URL = "http://192.168.1.102:5000/"; 
3. private static OkHttpClient.Builder httpClient = new OkHttpClient.Builder(); 
4.   
5. private static Retrofit.Builder builder = 
6. new Retrofit.Builder() 
7. .baseUrl(API_BASE_URL) 
8. .addConverterFactory(GsonConverterFactory.create()); 
9.   
10. public static <S> S createService(Class<S> serviceClass) { 
11. Retrofit retrofit = builder.client(httpClient.build()).build(); 
12. return retrofit.create(serviceClass); 
13. } 
14. }  

具体的API操作由FlaskClient接口操作，

1. public interface FlaskClient { 
2.     //上传图片 
3.     @Multipart 
4.     @POST("/upload") 
5.     Call<UploadResult> uploadMultipleFiles(@PartMap Map<String,RequestBody> files); 
6. }  

上传文件需要使用@Multipart关键字注解，@POST表明HTTP请求方式为POST,/upload为请求服务器的相对地址，uploadMultipleFiles是自定义的方法名，参数为Map<String,RequestBody> files即多个文件组成的Map对象，@PartMap表明这是多文件上传，如果单文件可以使用@Part MultipartBody.Part file,方法的返回类型默认为Response,由于我们已经开发了Server端，所以知道Server端的返回数据格式为Json，因此我们针对返回数据格式新建一个UploadResut类。

1. public class UploadResult { 
2.      public int code; // 1 
3.      public List<String> image_urls; 
4. }  

界面布局如图所示：

点击Upload按钮后执行上传操作，核心的方法：

1. public void uploadFiles() { 
2.     if(imagesList.size() == 0) { 
3.         Toast.makeText(MainActivity.this, "不能不选择图片", Toast.LENGTH_SHORT).show(); 
4.         return; 
5.     } 
6.     Map<String, RequestBody> files = new HashMap<>(); 
7.     final FlaskClient service = ServiceGenerator.createService(FlaskClient.class); 
8.     for (int i = 0; i < imagesList.size(); i++) { 
9.         File file = new File(imagesList.get(i).path); 
10.         files.put("file" + i + "\"; filename=\"" + file.getName(), RequestBody.create(MediaType.parse(imagesList.get(i).mimeType), file)); 
11.     } 
12.     Call<UploadResult> call = service.uploadMultipleFiles(files); 
13.     call.enqueue(new Callback<UploadResult>() { 
14.         @Override 
15.         public void onResponse(Call<UploadResult> call, Response<UploadResult> response) { 
16.             if (response.isSuccessful() && response.body().code == 1) { 
17.                 Toast.makeText(MainActivity.this, "上传成功", Toast.LENGTH_SHORT).show(); 
18.                 Log.i("orzangleli", "---------------------上传成功-----------------------"); 
19.                 Log.i("orzangleli", "基础地址为：" + ServiceGenerator.API_BASE_URL); 
20.                 Log.i("orzangleli", "图片相对地址为：" + listToString(response.body().image_urls,',')); 
21.                 Log.i("orzangleli", "---------------------END-----------------------"); 
22.             } 
23.         } 
24.         @Override 
25.         public void onFailure(Call<UploadResult> call, Throwable t) { 
26.             Toast.makeText(MainActivity.this, "上传失败", Toast.LENGTH_SHORT).show(); 
27.         } 
28.     }); 
29. }  

其中构建上传多文件的方法的参数较为关键，MediaType.parse(imagesList.get(i).mimeType)获取图片的mimeType，如果指定错误，可能会导致上传失败。

1. Map<String, RequestBody> files = new HashMap<>(); 
2. final FlaskClient service = ServiceGenerator.createService(FlaskClient.class); 
3. for (int i = 0; i < imagesList.size(); i++) { 
4.      File file = new File(imagesList.get(i).path); 
5.      files.put("file" + i + "\"; filename=\"" + file.getName(), RequestBody.create(MediaType.parse(imagesList.get(i).mimeType), file)); 
6. }  

集成Callback借口的匿名回调类的onResponse方法的第二个参数为服务器响应，通过访问body()方法返回UploadResult类型对象，接着就可以通过组合ServiceGenerator.API_BASE_URL和response.body().image_urls中每一项访问上传完成的图片。

4. 项目地址

本项目Client端和Server端均以开源，欢迎各位老总们Star。

Client地址: RetrofitMultiFilesUploadClient

Server地址: MultiFileUploadServer