2019獨角獸企業重金招聘Python工程師標準>>> 
????????我們先看看linkface給開放的接口：
| 字段 | 類型 | 必需 | 描述 |
|---|---|---|---|
| api_id | string | 是 | API 賬戶 |
| api_secret | string | 是 | API 密鑰 |
| selfie_file | file | 見下方注釋 | 需上傳的圖片文件 1，上傳本地圖片進行檢測時選取此參數 |
| selfie_url | string | 見下方注釋 | 圖片 1 的網絡地址，采用抓取網絡圖片方式時需選取此參數 |
| selfie_image_id | file | 見下方注釋 | 圖片 1 的id，在云端上傳過圖片可采用 |
| historical_selfie_file | file | 見下方注釋 | 需上傳的圖片文件 2，上傳本地圖片進行檢測時選取此參數 |
| historical_selfie_url | string | 見下方注釋 | 圖片 2 的網絡地址，采用抓取網絡圖片方式時需選取此參數 |
| historical_selfie_image_id | string | 見下方注釋 | 圖片 2 的id，在云端上傳過圖片可采用 |
| selfie_auto_rotate | boolean | 否 | 值為 true 時，對圖片 1 進行自動旋轉。默認值為 false，不旋轉 |
| historical_selfie_auto_rotate | boolean | 否 | 值為 true 時，對圖片 2 進行自動旋轉。默認值為 false，不旋轉 |
????????如文件所示，接口需要同時上傳兩個文件和兩個字段，一般我們的web前端就很簡單了，兩個file類型的input組成的form提交就可以，若想實現文件的異步上傳通俗的方式就是安裝瀏覽器安全插件，或者就是使用form表單的提交target指向為iframe，然后將iframe隱藏，使用視窗的父子級調用完成，但是這仍需要我們使用form組件選擇文件，很顯然這樣會使得我們的移動APP體驗極差，我們期望的就是使用相機拍完照然后直接異步上傳執行檢測，當然我們可以使用XMLHTTPReauest2拼接一個formatdata上傳
//不完全代碼
let formData = new FormData();
formData.append('fileName',input.files[0]);
xhr.open("post", encodeURI(url));
xhr.send(formData);但是，在web端，如果用戶不使用input選擇文件，我們是無法私自獲取并上傳文件的，這個瀏覽器的安全機制，想想如果可以拼接file://私自獲取文件，我們還安全么？
????????那么針對于cordova plugin 就相當于我們瀏覽器的插件了，道理是一定的，通過js的方式調用底層接口。我們首先能夠想得到的就是file-transfer這個插件，但是很遺憾的告訴你，這個插件一次只能上傳一個文件， ?https://github.com/apache/cordova-plugin-file-transfer，
Parameters:fileURL: Filesystem URL representing the file on the device or a data URI. For backwards compatibility, this can also be the full path of the file on the device. (See Backwards Compatibility Notes below)server: URL of the server to receive the file, as encoded by encodeURI().successCallback: A callback that is passed a FileUploadResult object. (Function)errorCallback: A callback that executes if an error occurs retrieving the FileUploadResult. Invoked with a FileTransferError object. (Function)options: Optional parameters (Object). Valid keys:fileKey: The name of the form element. Defaults to file. (DOMString)
fileName: The file name to use when saving the file on the server. Defaults to image.jpg. (DOMString)
httpMethod: The HTTP method to use - either PUT or POST. Defaults to POST. (DOMString)
mimeType: The mime type of the data to upload. Defaults to image/jpeg. (DOMString)
params: A set of optional key/value pairs to pass in the HTTP request. (Object, key/value - DOMString)
chunkedMode: Whether to upload the data in chunked streaming mode. Defaults to true. (Boolean)
headers: A map of header name/header values. Use an array to specify more than one value. On iOS, FireOS, and Android, if a header named Content-Type is present, multipart form data will NOT be used. (Object)
trustAllHosts: Optional parameter, defaults to false. If set to true, it accepts all security certificates. This is useful since Android rejects self-signed security certificates. Not recommended for production use. Supported on Android and iOS. (boolean)????????我真搞不懂既然cordova plugin封裝，為啥不封裝成文件數組接口呢，支持多文件和困難么？那么我們就來看看他的源碼：
boolean multipartFormUpload = (headers == null) || !headers.has("Content-Type");if (multipartFormUpload) {conn.setRequestProperty("Content-Type", "multipart/form-data; boundary=" + BOUNDARY);}// Set the cookies on the responseString cookie = getCookies(target);if (cookie != null) {conn.setRequestProperty("Cookie", cookie);}// Handle the other headersif (headers != null) {addHeadersToRequest(conn, headers);}/** Store the non-file portions of the multipart data as a string, so that we can add it* to the contentSize, since it is part of the body of the HTTP request.*/StringBuilder beforeData = new StringBuilder();try {for (Iterator<?> iter = params.keys(); iter.hasNext();) {Object key = iter.next();if(!String.valueOf(key).equals("headers")){beforeData.append(LINE_START).append(BOUNDARY).append(LINE_END);beforeData.append("Content-Disposition: form-data; name=\"").append(key.toString()).append('"');beforeData.append(LINE_END).append(LINE_END);beforeData.append(params.getString(key.toString()));beforeData.append(LINE_END);}}} catch (JSONException e) {Log.e(LOG_TAG, e.getMessage(), e);}beforeData.append(LINE_START).append(BOUNDARY).append(LINE_END);beforeData.append("Content-Disposition: form-data; name=\"").append(fileKey).append("\";");beforeData.append(" filename=\"").append(fileName).append('"').append(LINE_END);beforeData.append("Content-Type: ").append(mimeType).append(LINE_END).append(LINE_END);byte[] beforeDataBytes = beforeData.toString().getBytes("UTF-8");byte[] tailParamsBytes = (LINE_END + LINE_START + BOUNDARY + LINE_START + LINE_END).getBytes("UTF-8");????????看到了嗎，它是拼接了報文，這就是能夠解釋它為啥還需要依賴 cordova-plugin-file這個插件了，它可以直接獲取文件ArrayBuffer，很聰明啊，真的很聰明，為什么拼報文？豈不是很麻煩，正常我么使用java的http client是需要依賴 httpclient-4.0.1.jar commons-codec-1.3.jar? apache-mime4j-0.6.jar httpcore-4.0.1.jar httpmime-4.0.1.jar ，這無形之中就增大了app的大小，作為卡插拔式的插件，大小也是一個硬傷，所以封裝插件的同學們學習吧，人家可不是蓋的，拼接報文自然使得插件不需要依賴那些包了。
????????我們開腦補一下http報文協議：
????????一個HTTP請求報文由請求行（request line）、請求頭部（header）、空行和請求數據4個部分組成，下圖給出了請求報文的一般格式。
??? ????所以按照標準拼寫報文也是可以的。
????????但是我是一個H5工程師，我首先會使用H5技術去解決這件事，不然我就只能發揮java技能更改file-transfer這個插件了。XHR拼接formdata，可以是file也可以是一個blob，我曾將想過是不是有接口能夠模擬封裝input的file或者使用FileReader，然而還是那句話，瀏覽器為了安全不會讓我們自己拼接file:// 的，但是cordova跨平臺可以訪問文件系統（你可以看一下?https://github.com/apache/cordova-plugin-file里http-equiv="Content-Security-Policy"相關的描述），畢竟我們開發的是移動app，這個功能是不可缺少的，我們使用cordova的file plugin還是可以獲取文件的我們來看看ionic2提供的接口(http://ionicframework.com/docs/v2/native/file/? ):
readAsArrayBuffer(path,?file)
Read file and return data as an ArrayBuffer.
| Param | Type | Details |
|---|---|---|
| path | string | Base FileSystem. Please refer to the iOS and Android filesystems above |
| file | string | Name of file, relative to path. |
Returns:?Promise<ArrayBuffer|FileError>?Returns a Promise that resolves with the contents of the file as ArrayBuffer or rejects with an error.
驚喜吧！有個這個我們就能夠自己拼寫blob類型的formdata了，話不多說我們直接上代碼：
先寫封裝一個文件轉換類，file-convert-util.ts：
import {File, FileError} from "ionic-native";
/**** @author 趙俊明*/export class FileConvertUtil {constructor() {}//講文件轉換為Blobpublic static convertFileToBlob(fullFilePath: string): Promise<Blob|FileError> {return new Promise((resolve, reject)=> {FileConvertUtil.convertFileToArrayBuffer(fullFilePath).then((arrayBuffer)=> {resolve(new Blob([arrayBuffer], {type: "image/" + FileConvertUtil.extractFileType(fullFilePath)}));}).catch((reason)=> {reject(reason);});});}//將文件裝換為ArrayBufferpublic static convertFileToArrayBuffer(fullFilePath: string): Promise<ArrayBuffer | FileError> {return File.readAsArrayBuffer(FileConvertUtil.extractFilePath(fullFilePath), FileConvertUtil.extractFileName(fullFilePath));}//截取文件路徑public static extractFilePath(fullFilePath: string): string {return fullFilePath.substr(0, fullFilePath.lastIndexOf('/'));}//截取文件名稱public static extractFileName(fullFilePath: string): string {return fullFilePath.substr(fullFilePath.lastIndexOf('/') + 1);}//截取文件類型public static extractFileType(fullFilePath: string): string {return fullFilePath.split(".")[1];}}????????基于XHR2的upload，xhr-multipart-upload.ts：
import {BrowserXhr} from "@angular/http";
import {FileConvertUtil} from "./file-convert-util";
import {FileError} from "ionic-native";
import {Injectable, Component} from "@angular/core";
/*** @author zhaojunming*/export class XHRMultipartFileUpload {private static browserXhr = new BrowserXhr();constructor() {}public static upload(url: string, files: {name: string,path: string}[], params: any): Promise<any> {const xhr = XHRMultipartFileUpload.browserXhr.build();xhr.open("post", encodeURI(url));let formData = new FormData();return new Promise((resolve, reject)=> {if (params) {for (let _v in params) {if (params.hasOwnProperty(_v)) {formData.append(_v, params[_v]);}}}let blobPromiseList: Array<Promise<Blob|FileError>> = [];files.forEach((file)=> {blobPromiseList.push(FileConvertUtil.convertFileToBlob(file.path));});Promise.all(blobPromiseList).then((result)=> {result.forEach((blob, index)=> {formData.append(files[index].name, blob, FileConvertUtil.extractFileName(files[index].path));});xhr.onreadystatechange = ()=> {if (xhr.readyState == 4) {if (xhr.status == 200) {resolve(JSON.parse(xhr.responseText));} else {reject({code: xhr.status, message: JSON.parse(xhr.responseText)});}}}xhr.send(formData);}).catch((reason)=> {reject(reason);});});}}調用linkface的provider,linkface-verfication.ts:
/**** @author 趙俊明*/import {Injectable, Component} from "@angular/core";
import {XHRMultipartFileUpload} from "./xhr-multipart-upload";
import {Storage, LocalStorage} from "ionic-angular";//400 錯誤碼對應信息
const ERROR_MAPPING = {"ENCODING_ERROR": "參數非UTF-8編碼","DOWNLOAD_TIMEOUT": "網絡地址圖片獲取超時","DOWNLOAD_ERROR": "網絡地址圖片獲取失敗","IMAGE_FILE_SIZE_TOO_BIG": "圖片體積過大 ","IMAGE_ID_NOT_EXIST": "圖片不存在","NO_FACE_DETECTED": "圖片未檢測出人臉 ","CORRUPT_IMAGE": "文件不是圖片文件或已經損壞","INVALID_IMAGE_FORMAT_OR_SIZE": "圖片大小或格式不符合要求","INVALID_ARGUMENT": "請求參數錯誤","UNAUTHORIZED": "賬號或密鑰錯誤","KEY_EXPIRED": "賬號過期","RATE_LIMIT_EXCEEDED": "調用頻率超出限額","NO_PERMISSION": "無調用權限","NOT_FOUND": "請求路徑錯誤","INTERNAL_ERROR": "服務器內部錯誤"
};@Injectable()
export class LinkFaceVerfication {//普通照片比對URLprivate historicalSelfieVerificationURL = "https://v1-auth-api.visioncloudapi.com/identity/historical_selfie_verification";//公安水印照片與普通照片比對URLprivate selfieWatermarkVerificationURL = "https://v1-auth-api.visioncloudapi.com/identity/selfie_watermark_verification";private apiId: string;private apiSecret: string;//LocalStorageprivate storage = new Storage(LocalStorage);constructor() {this.getApiId().then(apiId=> {this.apiId = apiId || "6b666502c4324026b8604c8001a2cd14";}).catch(()=> {this.apiId = "6b666502c4324026b8604c8001a2cd14";});this.getApiSecret().then(apiSecret=> {this.apiSecret = apiSecret || "28cf8b8693e54d0b930d0a5089831841";}).catch(()=> {this.apiSecret = "28cf8b8693e54d0b930d0a5089831841";});}//普通照片比對public historicalSelfieVerification(selfie_file: string, historical_selfie_file: string, selfie_auto_rotate: boolean = true, historical_selfie_auto_rotate: boolean = true): Promise<any> {let params = {api_id: this.apiId,api_secret: this.apiSecret,selfie_auto_rotate: selfie_auto_rotate,historical_selfie_auto_rotate: historical_selfie_auto_rotate};let files = []files.push({name: "selfie_file", path: selfie_file});files.push({name: "historical_selfie_file", path: historical_selfie_file});return new Promise((resolve, reject)=> {XHRMultipartFileUpload.upload(this.historicalSelfieVerificationURL, files, params).then(result=> {resolve(result);}).catch(error=> {if (error && error.code == 400) {reject(ERROR_MAPPING[error.message.status]);} else {reject(JSON.stringify(error));}});});}//公安水印照片與普通照片比對public selfieWatermarkVerification(selfie_file: string, watermark_picture_file: string): Promise<any> {let params = {api_id: this.apiId, api_secret: this.apiSecret};let files = []files.push({name: "selfie_file", path: selfie_file});files.push({name: "watermark_picture_file", path: watermark_picture_file});return new Promise((resolve, reject)=> {XHRMultipartFileUpload.upload(this.selfieWatermarkVerificationURL, files, params).then(result=> {resolve(result);}).catch(error=> {if (error && error.code == 400) {reject(ERROR_MAPPING[error.message.status]);} else {reject(JSON.stringify(error));}});});}setApiId(apiId): boolean {if (apiId) {this.apiId = apiId;this.storage.set("apiId", apiId);return true;}return false;}setApiSecret(apiSecret): boolean {if (apiSecret) {this.apiSecret = apiSecret;this.storage.set("apiSecret", apiSecret);return true;}return false;}getApiId(): Promise<string> {return this.storage.get("apiId");}getApiSecret(): Promise<string> {return this.storage.get("apiSecret");}}看看我們怎么調用：
this.linkFaceVerfication.historicalSelfieVerification(this.selfie_file, this.historical_selfie_file, true, true).then(result=> {this.confidence = (result.confidence * 100).toFixed(2);this.uploading = false;}).catch(reason=> {this.toastMessage(reason);this.uploading = false;});我們來看看效果：
