之前公司有个需求，需要在产品里面加入新功能 “ 网页能对手机直接访问、查看、下载、上传媒体 ”。最终功能实现的效果图如下：
图1 、图片为系统相册中的照片，视频为系统相册中的视频，音乐为APP沙盒中的音乐，其他为APP沙盒中的其他
图2 、左边为多个相册的封面列表与标题，右边为具体某相册里的所有照片
图3 、系统相册中视频的信息
图4、 APP沙盒中的相关文件
开发这个功能的时候，我借助了GCDWebServer的搭建本地服务器功能，使用的是GCDWebUploader。
首先我们先初始化一个Server实例：
/*
初始化
*/
_webServer = [[GCDWebUploader alloc] initWithUploadDirectory:@"根目录地址"];
_webServer.delegate = self;
_webServer.allowHiddenItems = YES; //目的是不允许通过地址直接访问资源
在服务器开启之前，我们需要添加一些路由规则，在服务器开启之后添加是不会响应的。首先我们添加首页显示的规则：
/*
设置主页
*/
[_webServer addHandlerForMethod:@"GET" path:@"/" requestClass:[GCDWebServerRequest class] asyncProcessBlock:^(__kindof GCDWebServerRequest * _Nonnull request, GCDWebServerCompletionBlock _Nonnull completionBlock) {
NSString* bundlePath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"inDirectory:@"html"]; //网站资源文件首页地址
GCDWebServerDataResponse *response = [GCDWebServerDataResponse responseWithHTMLTemplate:bundlePath variables:@{}]; //variables数据类型是NSDictionary，假设variables = @{@"title":@"你好"}在HTML模板中用%title%来渲染数据
completionBlock(response); //最后记得通过这个Block给与数据回调
}];
/*
GCDWebServerDataResponse 是GCDWebServer给出的一种响应类型，它支持多种数据来实例，具体看它的头文件。
这里我使用的是通过HTML模板路径来实例GCDWebServerDataResponse
*/
接下来就是数据接口的声明了，我先举例说一下媒体列表数据接口：
/*
媒体数据列表
这里我定义了一个接口名为 media_list
完整的地址为 http://域名/media_list
*/
[_webServer addHandlerForMethod:@"GET" pathRegex:@"/media_list" requestClass:[GCDWebServerRequest class] asyncProcessBlock:^(__kindof GCDWebServerRequest * _Nonnull request, GCDWebServerCompletionBlock _Nonnull completionBlock) {
NSDictionary *get = request.query; //获取请求数据对象
NSString *type = get[@"type"];
NSDictionary *data; //列表数据一般都是 标题、封面地址、下载地址 等等
if ([type isEqualToString:@"photo"]) {
data = [获取系统照片列表数据];
} else if ([type isEqualToString:@"video"]) {
data = [获取系统视频列表数据];
} else if ([type isEqualToString:@"music"]) {
data = [获取音乐列表数据];
}
GCDWebServerDataResponse *response = [GCDWebServerDataResponse responseWithJSONObject:data]; //这个方法可以帮我们把数据以JSON的形式返回到请求方
completionBlock(response);
}];
曾经有一位童鞋问我应该怎么显示封面图片。具体做法如下：
/*
媒体封面图片
http://域名/thumbnail?type=photo&id=0267BCE3-AF8C-403C-9251-4EDC8B4C8EDD&ext=PNG
Web端调用方式 <img src="http://域名/thumbnail?type=photo&id=0267BCE3-AF8C-403C-9251-4EDC8B4C8EDD&ext=PNG" />
例子中包含3个参数：
type：媒体类型
id：系统媒体封面图片的标识
ext：系统媒体封面图片的后缀
这里的id 和 ext 可以重新组成AssetUrl: ( assets-library://asset/asset.JPG?id=91B1C271-C617-49CE-A074-E391BA7F843F&ext=JPG )
后面可以通过AssetUrl获取对应图片的Data
*/
[_webServer addHandlerForMethod:@"GET" pathRegex:@"/thumbnail" requestClass:[GCDWebServerRequest class] asyncProcessBlock:^(__kindof GCDWebServerRequest * _Nonnull request, GCDWebServerCompletionBlock _Nonnull completionBlock) {
NSDictionary *get = request.query;
NSString *type = get[@"type"];
if ([type isEqualToString:@"photo"]) {
[图片实例 获取照片封面 Complete:^(NSData *data) {
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1 * NSEC_PER_SEC)), dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
GCDWebServerDataResponse *response = [GCDWebServerDataResponse responseWithData:data contentType:@"image/jpeg"];
completionBlock(response);
});
}];
} else if ([type isEqualToString:@"video"]) {
[视频实例 获取视频封面 Complete:^(NSData *data) {
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1 * NSEC_PER_SEC)), dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
GCDWebServerDataResponse *response = [GCDWebServerDataResponse responseWithData:data contentType:@"image/jpeg"];
completionBlock(response);
});
}];
}
}];
/*
这里需要注意的几个点：
1、因为一个页面中可能有很多的图片需要加载封面，并发返回的话会造成堵塞，这里我们需要做个小优化，就是把时间尽量错开返回。使用了GCD中的dispatch_after来达到效果。
2、返回的图片数据以NSData格式返回，contentType必须与数据类型相符。
*/
既然能查看资源了，那肯定也有些小伙伴想要下载里面的资源啦，接下来我们来看看下载功能的实现方式吧：
/*
下载图片事例
例子链接： http://域名/download?path=/3/MP4_DB3745B4-51C7-4D63-9DE1-94D06EE0484D/sd1526479981_2.mp4
事例参数
type : 3 //类型判断
idStr : MP4_DB3745B4-51C7-4D63-9DE1-94D06EE0484D //通过系统相册库查找媒体的重要标识
name : sd1526479981_2.mp4 //媒体名字(带后缀)
*/
- (void)addDownloadHandler {
[_webServer addHandlerForMethod:WebServerMethodGet pathRegex:@"/download" requestClass:[GCDWebServerRequest class] asyncProcessBlock:^(__kindof GCDWebServerRequest * _Nonnull request, GCDWebServerCompletionBlock _Nonnull completionBlock) {
NSDictionary *get = request.query;
NSString *path = get[@"path"];
NSString *type = [path componentsSeparatedByString:@"/"][1];
NSString *idStr = [path componentsSeparatedByString:@"/"][2];
NSString *name = [path componentsSeparatedByString:@"/"][3];
NSInteger fileSize = 文件大小总长度;
__block NSInteger fileDataSize = 0; //记录已发送数据长度
NSString *contentType = @"image/png"; //与目标文件是对应的
//下载文件需要用到流的形式，所以这里使用GCDWebServerStreamedResponse
GCDWebServerStreamedResponse *response = [GCDWebServerStreamedResponse responseWithContentType:contentType asyncStreamBlock:^(GCDWebServerBodyReaderCompletionBlock _Nonnull completionBlock) {
//这里Block会一直轮询，一直到completionBlock(nil, nil)，就会结束下载。
[分段获取数据:path 进度:fileDataSize 数据回调:^(NSData *data) {
fileDataSize += data.length;
completionBlock(data, nil);
}];
}];
NSString *disposition = [NSString stringWithFormat:@"attachment; filename=\"%@\"",name]; //设置下载文件的名字
[response setValue:[NSString stringWithFormat:@"%zd",fileSize] forAdditionalHeader:@"Content-Length"]; //设置下载文件总长度
[response setValue:disposition forAdditionalHeader:@"Content-Disposition"]; //激活下载对话框
completionBlock(response);
}];
}
有了下载的功能了，当然还要有一个上传的功能啦：
/*
上传文件
*/
- (void)addUploadHandler {
__weak typeof(self) weakSelf = self;
[_webServer addHandlerForMethod:@"POST" path:@"/upload" requestClass:[GCDWebServerMultiPartFormRequest class] asyncProcessBlock:^(__kindof GCDWebServerRequest * _Nonnull request, GCDWebServerCompletionBlock _Nonnull completionBlock) {
//这里的Block是上传成功后才进入，GCDWebServer先把目标文件上传到临时目录中。
GCDWebServerResponse *response = [weakSelf uploadFile:(GCDWebServerMultiPartFormRequest*)request];
completionBlock(response);
}];
}
/*
上传成功后触发的方法
*/
- (GCDWebServerResponse*)uploadFile:(GCDWebServerMultiPartFormRequest*)request {
NSString *contentType = @"application/json"; //具体看Web的协议
GCDWebServerMultiPartFile* file = [request firstFileForControlName:@"file"];
NSString* relativePath = [[request firstArgumentForControlName:@"path"] string]; //上传文件所在的临时路径
/*
* 文件处理
*/
return [GCDWebServerDataResponse responseWithJSONObject:@{@"status":@(1)} contentType:contentType];
}
加载封面小建议
①假如是加载相册中的媒体封面图片：
1、假如是用ALAssetsLibrary来获取媒体资源的，可以使用ALAsset 的 ALAssetPropertyAssetURL中的ID 作为图片标识assets-library://asset/asset.JPG?id=91B1C271-C617-49CE-A074-E391BA7F843F&ext=JPG;
2、假如是用PhotoKit来获取媒体资源的，可以使用PHAsset.localIdentifier作为图片的标识91B1C271-C617-49CE-A074-E391BA7F843F/L0/001
3、上面两点中的结果都包含91B1C271-C617-49CE-A074-E391BA7F843F，可以作为唯一标识。
4、开发者主动拼接出AssetUrl assets-library://asset/asset.{图片后缀}?id={图片标识}&ext={图片后缀}
5、通过AssetUrl 获取 目标图片的Data。
②假如是加载沙盒相册中的媒体封面图片：
可以用文件名做标识，最后通过文件在沙盒中的路径获取Data。
