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安裝：

pip install Flask
pip install werkzeug複製代碼

2.2 程序實現

首先要引入依賴庫：

from flask import Flask,request,send_from_directory,jsonify
import os
from werkzeug import secure_filename複製代碼

本實驗須要上傳文件，須要將所上傳文件的文件類型以及文件名作出限制，防止某些破壞服務器的程序運行，另外有些非法文件名如：
filename = "../../../../home/username/.bashrc"
若是黑客們可以操做這樣的文件，對服務器系統來講，將是致命打擊。因此werkzeug提供了secure_filename對上傳文件的文件名進行合法校驗。

判斷文件後綴是否合法

ALLOWED_EXTENSIONS=set(['png','jpg','jpeg','gif'])
def allowed_file(filename):
    return '.' in filename and filename.rsplit('.',1)[1] in ALLOWED_EXTENSIONS複製代碼

接收上傳文件的函數代碼以下：

@app.route('/upload',methods=['POST'])
def upload_file():
    if request.method=='POST':
        for k in request.files:
            file = request.files[k]
            image_urls = []
            if file and allowed_file(file.filename):
                filename=secure_filename(file.filename)
                file.save(os.path.join(app.config['IMAGE_FOLDER'],filename))
                image_urls.append("images/%s"%filename)
        return jsonify({"code":1,"image_urls":image_urls})複製代碼

Flask支持GET,POST,PUT,DELETE等HTTP請求方式，使用裝飾器進行修飾，相似於Java中的註解概念，/upload爲客戶端請求的相對地址，請求方式限制爲POST.根據request內置對象，能夠訪問客戶端發來的文件，將文件檢查後保存在本地，其中image_urls爲上傳後的圖片的相對地址數組。最後將圖片的地址以json格式返回給客戶端。

完整的Server端代碼以下：

from flask import Flask,request,send_from_directory,jsonify
import os
from werkzeug import secure_filename

app = Flask(__name__)
app.config['IMAGE_FOLDER'] = os.path.abspath('.')+'\\images\\'
ALLOWED_EXTENSIONS=set(['png','jpg','jpeg','gif'])

def allowed_file(filename):
    return '.' in filename and filename.rsplit('.',1)[1] in ALLOWED_EXTENSIONS

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

#讓文件映射訪問，不然默認只能訪問static文件夾中的文件
@app.route("/images/<imgname>",methods=['GET'])
def images(imgname):
    return send_from_directory(app.config['IMAGE_FOLDER'],imgname)

if __name__ == "__main__":
    # 檢測 IMAGE_FOLDER 是否存在
    if not os.path.exists(app.config['IMAGE_FOLDER']):
        os.mkdir(app.config['IMAGE_FOLDER'])
    app.run("192.168.1.102",debug=True)複製代碼

這裏有一個小技巧，寫完Server端代碼後可使用Postman進行測試，測試成功後再進行客戶端程序開發。

3. 客戶端開發

由於涉及文件的上傳，筆者這裏以圖片爲例進行上傳實驗，圖片上傳除了重頭戲Retrofit以外，還須要選擇圖片，筆者這裏推薦一個模仿微信的圖片選擇庫 ImagePicker .

3.1 添加依賴庫

圖片加載庫筆者喜歡使用Glide

compile 'com.squareup.retrofit2:retrofit:2.1.0'
compile 'com.squareup.retrofit2:converter-gson:2.1.0'
compile 'com.github.bumptech.glide:glide:3.7.0'
compile 'com.lzy.widget:imagepicker:0.4.1'複製代碼

3.2 程序實現

若是沒有接觸過Retrofit 2，能夠來個人博客Retrofit教程 瞭解。

Retrofit2 是一個支持RESTful API的請求庫，實際上只是對API請求方式的封裝，真正的網絡請求由OkHttp發出。

Retrofit2通常會定義一個ServiceGenerator類，用於動態生成Retrofit對象。

public class ServiceGenerator {
    public static final String API_BASE_URL = "http://192.168.1.102:5000/";
    private static OkHttpClient.Builder httpClient = new OkHttpClient.Builder();

    private static Retrofit.Builder builder =
            new Retrofit.Builder()
                    .baseUrl(API_BASE_URL)
                    .addConverterFactory(GsonConverterFactory.create());

    public static <S> S createService(Class<S> serviceClass) {
        Retrofit retrofit = builder.client(httpClient.build()).build();
        return retrofit.create(serviceClass);
    }
}複製代碼

具體的API操做由FlaskClient接口操做，

public interface FlaskClient {
    //上傳圖片
    @Multipart
    @POST("/upload")
    Call<UploadResult> uploadMultipleFiles( @PartMap Map<String,RequestBody> files);
}複製代碼

上傳文件須要使用@Multipart關鍵字註解，@POST代表HTTP請求方式爲POST,/upload爲請求服務器的相對地址，uploadMultipleFiles是自定義的方法名，參數爲Map<String,RequestBody> files即多個文件組成的Map對象，@PartMap代表這是多文件上傳，若是單文件可使用@Part MultipartBody.Part file,方法的返回類型默認爲Response,因爲咱們已經開發了Server端，因此知道Server端的返回數據格式爲Json，所以咱們針對返回數據格式新建一個UploadResut類。

public class UploadResult {
    public int code;    // 1
    public List<String> image_urls;
}複製代碼

界面佈局如圖所示：

點擊Upload按鈕後執行上傳操做，核心的方法：

public void uploadFiles() {
    if(imagesList.size() == 0) {
        Toast.makeText(MainActivity.this, "不能不選擇圖片", Toast.LENGTH_SHORT).show();
        return;
    }
    Map<String, RequestBody> files = new HashMap<>();
    final FlaskClient service = ServiceGenerator.createService(FlaskClient.class);
    for (int i = 0; i < imagesList.size(); i++) {
        File file = new File(imagesList.get(i).path);
        files.put("file" + i + "\"; filename=\"" + file.getName(), RequestBody.create(MediaType.parse(imagesList.get(i).mimeType), file));
    }
    Call<UploadResult> call = service.uploadMultipleFiles(files);
    call.enqueue(new Callback<UploadResult>() {
        @Override
        public void onResponse(Call<UploadResult> call, Response<UploadResult> response) {
            if (response.isSuccessful() && response.body().code == 1) {
                Toast.makeText(MainActivity.this, "上傳成功", Toast.LENGTH_SHORT).show();
                Log.i("orzangleli", "---------------------上傳成功-----------------------");
                Log.i("orzangleli", "基礎地址爲：" + ServiceGenerator.API_BASE_URL);
                Log.i("orzangleli", "圖片相對地址爲：" + listToString(response.body().image_urls,','));
                Log.i("orzangleli", "---------------------END-----------------------");
            }
        }
        @Override
        public void onFailure(Call<UploadResult> call, Throwable t) {
            Toast.makeText(MainActivity.this, "上傳失敗", Toast.LENGTH_SHORT).show();
        }
    });
}複製代碼

其中構建上傳多文件的方法的參數較爲關鍵，MediaType.parse(imagesList.get(i).mimeType)獲取圖片的mimeType，若是指定錯誤，可能會致使上傳失敗。

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

集成Callback藉口的匿名回調類的onResponse方法的第二個參數爲服務器響應，經過訪問body()方法返回UploadResult類型對象，接着就能夠經過組合ServiceGenerator.API_BASE_URL和response.body().image_urls中每一項訪問上傳完成的圖片。

4. 項目地址

本項目Client端和Server端均以開源，歡迎各位老總們Star。
Client地址: RetrofitMultiFilesUploadClient
Server地址: MultiFileUploadServer