base64上傳圖片

PC端上傳圖片

基本結構

1. form[enctype="multipart/form-data"]
2. input[type="file"]
3. 上傳完畢後，獲取圖片url，顯示到頁面上

問題

1. 圖片要上傳完畢後，才能顯示
2. 壓縮上傳

H5 如何解決

1. FileReader
2. canvas

FileReader

FileReader能夠將File對象轉化成base64，這樣能夠優先展現圖片，而後處理上傳操做。

1 var fr = new FileReader();
2 fr.readAsDataURL(file);
3 fr.onload = function(e) {
4     $('img').attr('src', e.target.result);
5 };

FormData

實際的上傳操做，大可能是ajax處理的，FormData能夠用來構建form表單。

var fd = new FormData();
 fd.append('filename', file);
$.ajax({
     url: 'xxxx/yyyy',
     data: fd,
     type: 'POST',
     cache: false,
     processData: false,
     contentType: false,
     dataType: 'json',
     success: function(data) {
     },
     error: function() {
     }
});

canvas

手機的流量是寶貴的，可是上傳個一張照片可能有幾M，全部須要對圖片進行壓縮處理，canvas對圖片的操做是經過base64格式處理的。

var img = new Image();
img.src = base64;
img.onload = function(){
    var canvas = document.createElement('canvas');
    canvas.width = img.naturalWidth;
    canvas.height = img.naturalHeight;
    canvas.getContext("2d").drawImage(img, 0, 0);
    var compressBase64 = cvs.toDataURL(mime_type, quality / 100);
}

上傳base64

使用mqq接口拍照或者獲取本地圖片時，反饋都是base64格式，input在處理過程當中，通過壓縮等操做也可能將File對象轉化成base64，對base64的上傳支持有如下方案：

1. server支持，單獨開接口處理base64上傳
2. 前端將base64轉化成File對象，複用原來的server接口

這裏重點討論第2中方案。 JS提供了Blob對象，是一個類文件對象，File對象繼承了Blob對象，而且作了一些擴展。 基於此，只須要把base64轉化成Blob對象便可。Blob的構造參考 這裏 ，能夠使用類型數據來處理。

// 解碼base64
var byteString = atob(dataURI.split(',')[1]);
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
// 類型數組
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], {
    type: mimeString
});