前一段時間我翻譯了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