POST请求上传多张图片并携带参数

简介:

POST请求上传多张图片并携带参数

在iOS中,用POST请求携带参数上传图片是非常恶心的事情,HTTPBody部分完全需要我们自己来配置,这个HTTPBody分为3个部分,头部分可以携带参数,中间部分就是我们要传输的图片文件,尾部就是结束标识了,这些设置完了还不够,你还需要配置一下HTTPHeaderField中的Content-Length以及Content-Type,恐怕一般人都会头大:).

完整的HTTPBody解密出来后是下面的格式:

--AaB03x
Content-Disposition: form-data; name="appkey"

peixunduoduo
--AaB03x
Content-Disposition: form-data; name="content"

真心太好用了!
--AaB03x
Content-Disposition: form-data; name="userid"
--AaB03x
Content-Disposition: form-data; name="sumscore"
--AaB03x
Content-Disposition: form-data; name="courseid"
--AaB03x
Content-Disposition: form-data; name="fromapp"
--AaB03x
Content-Disposition: form-data; name="sign"

003a0d94aff1c7728ab21eb785fbd544
--AaB03x
Content-Disposition: form-data; name="timestamp"


--AaB03x
Content-Disposition: form-data; name="image1"; filename="1.png"
Content-Type: image/png


<89504e47 0d0a1a0a 0000000d 49484452 000000c9 000000b9 08060000 0082e41b c4000000 1c69444f 54000000 02000000 00000000 5d000000 28000000 5d000000 5c000030 914514f9 44000030 5d494441 547801ec 7d0b7015 55ba2eea 8ce7a8e3 191d9ff8 0221ec50 35a335b7 4a92ec47 928d2373 4818e7e8 301254d4 0113f50e 09e21c08 1ec34b04 026a8023 210e11a3 189084b9 046a02c5 4b86644c 8e922a42 098c12ca 70490e82 6e2f8178 cd78bb4b 27c7f7fb 0d924e76 26c49c01 ecfdd078 fa059f2f fe098124 c4385d62 1c5f0c75 2dde0f81 e42a8384 8db86b91 b1aea53e 85401202 4908a401 78200492 0003d4d3 12d1a949 44a83850 ba00f69b ed439299 be63b7a7 db792dd1 e7310e14 b2d7fbfb ff017ed5 ee545a48 12fc0000 00004945 4e44ae42 6082>


--AaB03x--

本人封装好了上传图片的类,源码如下:

NETWorkPicUpload.h


//
//  NETWorkPicUpload.h
//  UploadPics
//
//  Copyright (c) 2014年 Y.X. All rights reserved.
//

#import <Foundation/Foundation.h>

// 创建pictures数组需要的数据
NSData * createPNGPicture(NSString *formBoundary, UIImage *image,
                          NSString *name,         NSString *filename);

@interface NETWorkPicUpload : NSObject

@property (nonatomic, strong) NSString       *boundary;    // 分割字符串
@property (nonatomic, strong) NSDictionary   *parameters;  // 携带的参数
@property (nonatomic, strong) NSArray        *pictures;    // 封装好的图片的数据

- (void)configRequest:(NSMutableURLRequest **)request;

@end

NETWorkPicUpload.m


//
//  NETWorkPicUpload.m
//  UploadPics
//
//  Copyright (c) 2014年 Y.X. All rights reserved.
//

#import "NETWorkPicUpload.h"

@implementation NETWorkPicUpload

#pragma mark - 创建图片POST头部信息
- (NSData *)createParametersData
{
    // 生成了头部信息
    NSString        *start = [NSString stringWithFormat:@"--%@", _boundary];
    NSMutableString *body  = [[NSMutableString alloc] init];
    NSArray         *keys  = [_parameters allKeys];
    
    [keys enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL *stop) {
        NSString *key = keys[idx];
        
        [body appendFormat:@"\r\n%@\r\n", start];
        [body appendFormat:@"Content-Disposition: form-data; name=\"%@\"\r\n\r\n", key];
        [body appendFormat:@"%@",_parameters[key]];
    }];
    
    return [body dataUsingEncoding:NSUTF8StringEncoding];
}

#pragma mark - 创建图片POST尾部信息
- (NSData *)createEndData
{
    NSString *end = [NSString stringWithFormat:@"\r\n--%@--\r\n", _boundary];
    return [end dataUsingEncoding:NSUTF8StringEncoding];
}

#pragma mark - 生成POST需要的数据格式
- (NSData *)createPostData
{
    if (_boundary && _parameters)
    {
        NSMutableData *postData = [NSMutableData data];
        
        // 添加头
        [postData appendData:[self createParametersData]];
        
        // 添加图片
        [_pictures enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL *stop) {
            if ([obj isKindOfClass:[NSData class]])
            {
                [postData appendData:obj];
            }
        }];
        
        // 添加尾
        [postData appendData:[self createEndData]];
        
        return postData;
    }
    else
    {
        return nil;
    }
}

#pragma mark - 创建PNG格式的图片
NSData * createPNGPicture(NSString *formBoundary, UIImage *image,
                          NSString *name,         NSString *filename)
{
    NSString *start = [NSString stringWithFormat:@"--%@", formBoundary];
    
    // 添加分界线,换行
    NSMutableString *subBody = [[NSMutableString alloc] init];
    [subBody appendFormat:@"\r\n%@\r\n", start];
    [subBody appendFormat:@"Content-Disposition: form-data; name=\"%@\"; filename=\"%@\"\r\n",
     name, filename];
    
    // 声明上传文件的格式
    [subBody appendFormat:@"Content-Type: image/png\r\n\r\n"];
    
    // 图片data
    NSData *imageData = UIImagePNGRepresentation(image);
    
    // 生成图片data
    NSMutableData *tmpData = [NSMutableData data];
    [tmpData appendData:[subBody dataUsingEncoding:NSUTF8StringEncoding]];
    [tmpData appendData:imageData];
    
    return [NSData dataWithData:tmpData];
}

- (void)configRequest:(NSMutableURLRequest **)request
{
    // 获取到了POST包体
    NSData *data = [self createPostData];
    
    // 配置请求
    NSMutableURLRequest *tmpRequest = *request;
    
    // 设置请求POST包体
    tmpRequest.HTTPBody    = data;
    tmpRequest.HTTPMethod  = @"POST";
    
    // 设置HTTPHeaderField
    [tmpRequest setValue:[NSString stringWithFormat:@"%lu", (unsigned long)[data length]]
      forHTTPHeaderField:@"Content-Length"];
    [tmpRequest setValue:[NSString stringWithFormat:@"multipart/form-data; boundary=%@", _boundary]
      forHTTPHeaderField:@"Content-Type"];
}

@end

使用情况:

上传图片的截图:

说一下几个注意的地方:

以下地方会对request进行一些修改,注意**,这个是指针的指针,你懂得:)

 

大体流程就是:

1. 根据参数创建POST头部信息

2. 填充中间的图片信息

3. 用标示符表示结束信息

4. 对HTTPHeaderField进行一些设置

 

要实现以上这些是需要你对网络知识有着充分理解的:),也许你用惯了第三方开源代码,但不理解原理,还是很难根据需求进行必要修改,这一点需要注意哦.




目录
相关文章
|
5月前
【微信公众平台对接】有关【上传图文消息内的图片获取URL】调用示例
【微信公众平台对接】有关【上传图文消息内的图片获取URL】调用示例
149 0
|
5月前
|
SQL Java 应用服务中间件
使用Servlet上传多张图片——访问提示
使用Servlet上传多张图片——访问提示
|
1月前
|
前端开发 JavaScript
前端JS截取url上的参数
文章介绍了两种前端JS获取URL参数的方法:手动截取封装和使用URLSearchParams。
34 0
|
5月前
|
存储 小程序
【边做边学】uni.switchTab的目标页面获取不到url携的参数
【边做边学】uni.switchTab的目标页面获取不到url携的参数
314 1
|
存储 前端开发 Java
Element el-upload 文件上传/图片上传/拖拽上传/附带参数/附带请求头部详解
文目录 1. 前言 2. 基本用法 2.1 前端部分 2.2 后端部分 2.3 获取后端返回信息 3. 外观功能介绍 3.1 拖拽上传 3.2 显示图片 3.3 设置文件列表样式 3.4 显示提示信息 4. 事件功能介绍 4.1 限制上传文件数量 4.2 限制上传文件类型和大小 4.3 移除文件处理 4.4 手动上传 5. 附带参数 6. 附带请求头部 7. 小结
5796 0
|
11月前
|
小程序
微信小程序跳转页面传多个参数(拼接)
微信小程序跳转页面传多个参数(拼接)
175 0
|
前端开发
Thinkphp5分页后携带参数进行跳转传递
Thinkphp5分页后携带参数进行跳转传递
html如何携带参数自动跳转页面
最近有一个项目,跳转页面的时候,不能让用户点击跳转,只能是页面A 自动跳转到页面B,并需要把页面A 的 用户Id :userId ,传递给页面 B。然后在页面B 内 根据传递过来的 用户Id userId 来进行操作:比如页面的刷新之类的。
413 1
html如何携带参数自动跳转页面
|
存储 API Android开发
微信图片分享支持url,缩略图支持url
在集成微信分享的过程中,如果`缩略图`是url形式,或者`大图分享`的图片是个url,就需要我们先把图片下载下来,然后依据微信的要求对图片做一些压缩操作,最后将图片的数据设置给要分享的对象即可。
|
前端开发 数据库
eggjs 怎么实现返回 base64 图片的接口给前端回显头像?
eggjs 怎么实现返回 base64 图片的接口给前端回显头像?
269 0
eggjs 怎么实现返回 base64 图片的接口给前端回显头像?