angular2 multipart/form-data 上传图片

前端之家收集整理的这篇文章主要介绍了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://www.f2er.com/angularjs/147703.html

猜你在找的Angularjs相关文章