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)而已

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!