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.

ParamTypeDetails

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

我們來看看效果：

轉載于:https://my.oschina.net/u/259422/blog/747399

總結

以上是生活随笔為你收集整理的在cordova中使用HTML5的多文件上传的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。