如果使用的是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)而已