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