angular2 multipart/form-data 上传图片

如果使用的是html5的input type=file，那获取到的file对象是一个base64转码，这样的：

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4RCcRXhpZgAATU0AKgAAAAgABAE7AAIAAAAOAAAISodpAAQAAAABAA.......

是一个很长很长超级长的字符串

那么在执行图片上传的时候，header中要设置为multipart/form-data

headers.set("Content-Type", "multipart/form-data");

这是由http协议决定的，文件格式都是要以表单的形式提交，具体什么原因可以自己百度一下，如果有验证的话可以加上

headers.set("Authorization", "Bearer " + token);

我这里用的是oauth2，所以需要一个token

这样header的内容就设置完毕了

图片上传需要使用post请求，图片对象是要加在body里面，这里要新建一个formdata对象：

let formParams = new FormData();

formParams.append('file', file);

file就是图片对象，左边key==file这个是固定写法

这个file对象不是base64的string，如果传的是base64的string，那在页面上是显示不出来的，这里的file对象应该是二进制格式，二进制格式有arraybuffer，不过arraybuffer是继承自blob对象，所以这里就可以直接new 一个blob对象，将base64转为blob对象，如下：

/**
 * 将dataurl转为blob对象
 * @param dataurl
 * @returns {Blob}
 */
dataURLtoBlob(dataurl: string) {
  let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
}

接下来new一个http请求的参数对象：

let requestOptions: RequestOptionsArgs = new RequestOptions({
    method: RequestMethod.Post,
    headers: ServiceBase.headers,
    body: formParams,
    search: queryParameters
});

this.http.request(path, requestOptions);

这样就OK了，查看浏览器的network如下：

request payload里面的内容就是由formdata对象自己生成的，我原来看到这样的格式我还以为是需要自己拼字符串，后来一想，不应该啊，这么复杂怎么可能呢，简直没天理，所有的内容都是formdata对象生成的，我只做了一步，那就是append("file", file)而已

转载于:https://my.oschina.net/u/2499632/blog/866467