背景
在iOS端由於文件系統的封閉性，文件的上傳變得十分麻煩，一個比較好的解決方案是通過局域網WiFi來傳輸文件並存儲到沙盒中。
簡介
SGWiFiUpload是一個基於CocoaHTTPServer的WiFi上傳框架。CocoaHTTPServer是一個可運行於iOS和OS X上的輕量級服務端框架，可以處理GET和POST請求，通過對代碼的初步改造，實現了iOS端的WiFi文件上傳與上傳狀態監聽。
下載與使用
目前已經做成了易用的框架，上傳到了GitHub，點擊這裏進入，歡迎Star！
請求的處理
CocoaHTTPServer通過HTTPConnection這一接口實現類來回調網絡請求的各個狀態，包括對請求頭、響應體的解析等。爲了實現文件上傳，需要自定義一個繼承HTTPConnection的類，這裏命名爲SGHTTPConnection，與文件上傳有關的幾個方法如下。
解析文件上傳的請求頭
- (void)processStartOfPartWithHeader:(MultipartMessageHeader*) header {
// in this sample, we are not interested in parts, other then file parts.
// check content disposition to find out filename
MultipartMessageHeaderField* disposition = [header.fields objectForKey:@"Content-Disposition"];
NSString* filename = [[disposition.params objectForKey:@"filename"] lastPathComponent];
if ( (nil == filename) || [filename isEqualToString: @""] ) {
// it's either not a file part, or
// an empty form sent. we won't handle it.
return;
}
// 這裏用於發出文件開始上傳的通知
dispatch_async(dispatch_get_main_queue(), ^{
[[NSNotificationCenter defaultCenter] postNotificationName:SGFileUploadDidStartNotification object:@{@"fileName" : filename ?: @"File"}];
});
// 這裏用於設置文件的保存路徑，先預存一個空文件，然後進行追加寫內容
NSString *uploadDirPath = [SGWiFiUploadManager sharedManager].savePath;
BOOL isDir = YES;
if (![[NSFileManager defaultManager]fileExistsAtPath:uploadDirPath isDirectory:&isDir ]) {
[[NSFileManager defaultManager]createDirectoryAtPath:uploadDirPath withIntermediateDirectories:YES attributes:nil error:nil];
}
NSString* filePath = [uploadDirPath stringByAppendingPathComponent: filename];
if( [[NSFileManager defaultManager] fileExistsAtPath:filePath] ) {
storeFile = nil;
}
else {
HTTPLogVerbose(@"Saving file to %@", filePath);
if(![[NSFileManager defaultManager] createDirectoryAtPath:uploadDirPath withIntermediateDirectories:true attributes:nil error:nil]) {
HTTPLogError(@"Could not create directory at path: %@", filePath);
}
if(![[NSFileManager defaultManager] createFileAtPath:filePath contents:nil attributes:nil]) {
HTTPLogError(@"Could not create file at path: %@", filePath);
}
storeFile = [NSFileHandle fileHandleForWritingAtPath:filePath];
[uploadedFiles addObject: [NSString stringWithFormat:@"/upload/%@", filename]];
}
}其中有中文註釋的兩處是比較重要的地方，這裏根據請求頭髮出了文件開始上傳的通知，並且往要存放的路徑寫一個空文件，以便後續追加內容。
上傳過程中的處理
- (void) processContent:(NSData*) data WithHeader:(MultipartMessageHeader*) header
{
// here we just write the output from parser to the file.
// 由於除去文件內容外，還有HTML內容和空文件通過此方法處理，因此需要過濾掉HTML和空文件內容
if (!header.fields[@"Content-Disposition"]) {
return;
} else {
MultipartMessageHeaderField *field = header.fields[@"Content-Disposition"];
NSString *fileName = field.params[@"filename"];
if (fileName.length == 0) return;
}
self.currentLength += data.length;
CGFloat progress;
if (self.contentLength == 0) {
progress = 1.0f;
} else {
progress = (CGFloat)self.currentLength / self.contentLength;
}
dispatch_async(dispatch_get_main_queue(), ^{
[[NSNotificationCenter defaultCenter] postNotificationName:SGFileUploadProgressNotification object:@{@"progress" : @(progress)}];
});
if (storeFile) {
[storeFile writeData:data];
}
}這裏除了拼接文件內容以外，還發出了上傳進度的通知，當前方法中只能拿到這一段文件的長度，總長度需要通過下面的方法拿到。
獲取文件大小
- (void)prepareForBodyWithSize:(UInt64)contentLength
{
HTTPLogTrace();
// 設置文件總大小，並初始化當前已經傳輸的文件大小。
self.contentLength = contentLength;
self.currentLength = 0;
// set up mime parser
NSString* boundary = [request headerField:@"boundary"];
parser = [[MultipartFormDataParser alloc] initWithBoundary:boundary formEncoding:NSUTF8StringEncoding];
parser.delegate = self;
uploadedFiles = [[NSMutableArray alloc] init];
}處理傳輸完畢
- (void) processEndOfPartWithHeader:(MultipartMessageHeader*) header
{
// as the file part is over, we close the file.
// 由於除去文件內容外，還有HTML內容和空文件通過此方法處理，因此需要過濾掉HTML和空文件內容
if (!header.fields[@"Content-Disposition"]) {
return;
} else {
MultipartMessageHeaderField *field = header.fields[@"Content-Disposition"];
NSString *fileName = field.params[@"filename"];
if (fileName.length == 0) return;
}
[storeFile closeFile];
storeFile = nil;
dispatch_async(dispatch_get_main_queue(), ^{
[[NSNotificationCenter defaultCenter] postNotificationName:SGFileUploadDidEndNotification object:nil];
});
}這裏關閉了文件管道，並且發出了文件上傳完畢的通知。
開啓Server
CocoaHTTPServer默認的Web根目錄爲MainBundle，他會在目錄下尋找index.html，文件上傳的請求地址爲upload.html，當以POST方式請求upload.html時，請求會被Server攔截，並且交由HTTPConnection處理。
- (BOOL)startHTTPServerAtPort:(UInt16)port {
HTTPServer *server = [HTTPServer new];
server.port = port;
self.httpServer = server;
[self.httpServer setDocumentRoot:self.webPath];
[self.httpServer setConnectionClass:[SGHTTPConnection class]];
NSError *error = nil;
[self.httpServer start:&error];
return error == nil;
}在HTML中發送POST請求上傳文件
在CocoaHTTPServer給出的樣例中有用於文件上傳的index.html，要實現文件上傳，只需要一個POST方法的form表單，action爲upload.html，每一個文件使用一個input標籤，type爲file即可，這裏爲了美觀對input標籤進行了自定義。
下面的代碼演示了能同時上傳3個文件的index.html代碼。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv=\"content-type\" content=\"text/html; charset=UTF-8\">
</head>
<style>
body {
margin: 0px;
padding: 0px;
font-size: 12px;
background-color: rgb(244,244,244);
text-align: center;
}
#container {
margin: auto;
}
#form {
margin-top: 60px;
}
.upload {
margin-top: 2px;
}
#submit input {
background-color: #ea4c88;
color: #eee;
font-weight: bold;
margin-top: 10px;
text-align: center;
font-size: 16px;
border: none;
width: 120px;
height: 36px;
}
#submit input:hover {
background-color: #d44179;
}
#submit input:active {
background-color: #a23351;
}
.uploadField {
margin-top: 2px;
width: 200px;
height: 22px;
font-size: 12px;
}
.uploadButton {
background-color: #ea4c88;
color: #eee;
font-weight: bold;
text-align: center;
font-size: 15px;
border: none;
width: 80px;
height: 26px;
}
.uploadButton:hover {
background-color: #d44179;
}
.uploadButton:active {
background-color: #a23351;
}
</style>
<body>
<div id="container">
<div id="form">
<h2>WiFi File Upload</h2>
<form name="form" action="upload.html" method="post" enctype="multipart/form-data" accept-charset="utf-8">
<div class="upload">
<input type="file" name="upload1" id="upload1" style="display:none" onChange="document.form.path1.value=this.value">
<input class="uploadField" name="path1" readonly>
<input class="uploadButton" type="button" value="Open" onclick="document.form.upload1.click()">
</div>
<div class="upload">
<input type="file" name="upload2" id="upload2" style="display:none" onChange="document.form.path2.value=this.value">
<input class="uploadField" name="path2" readonly>
<input class="uploadButton" type="button" value="Open" onclick="document.form.upload2.click()">
</div>
<div class="upload">
<input type="file" name="upload3" id="upload3" style="display:none" onChange="document.form.path3.value=this.value">
<input class="uploadField" name="path3" readonly>
<input class="uploadButton" type="button" value="Open" onclick="document.form.upload3.click()">
</div>
<div id="submit"><input type="submit" value="Submit"></div>
</form>
</div>
</div>
</body>
</html>表單提交後，會進入upload.html頁面，該頁面用於說明上傳完畢，下面的代碼實現了3秒後的重定向返回。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv=\"content-type\" content=\"text/html; charset=UTF-8\">
<meta http-equiv=refresh content="3;url=index.html">
</head>
<body>
<h3>Upload Succeeded!</h3>
<p>The Page will be back in 3 seconds</p>
</body>
</html>