使用Ajax POST請求將圖像和JSON數據發送到服務器？

Question

我想將用戶從機器中選擇的圖像連同表單數據一起發送到JSON對象併發送到服務器。我正在使用Node作爲服務器。是否有可能將圖像放入JSON對象以及其他表單元素並在Node中讀取？

Answer 1

我遇到的常見方式是使用Base64字符串方法：將圖像編碼爲Base64字符串，並將其設置爲您發送到服務器的JSON對象的一部分。

另一種方法似乎是在JSON中使用二進制數據，但我從來沒有嘗試過，所以沒有從我這麼多的信息。

Here's一個代碼示例在Javascript中執行Base64編碼。具體看下面的方法

function getBase64Image(imgElem) { 
// imgElem must be on the same server otherwise a cross-origin error will be thrown "SECURITY_ERR: DOM Exception 18" 
    var canvas = document.createElement("canvas"); 
    canvas.width = imgElem.clientWidth; 
    canvas.height = imgElem.clientHeight; 
    var ctx = canvas.getContext("2d"); 
    ctx.drawImage(imgElem, 0, 0); 
    var dataURL = canvas.toDataURL("image/png"); 
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, ""); 
} 

Answer 2

有一種方法可以實現這一點：使用圖像數據。

在Javascript中，在客戶端，FileReader將允許您讀取二進制圖像數據，並將它們轉換爲base64編碼的字符串。

在客戶端：編碼圖像

var file = $('.file-upload > input')[0].files[0]; 

function upload(file) { 
    var reader = new FileReader(); 

    // when image data was read 
    reader.onload = function(event) { 
    // I usually remove the prefix to only keep data, but it depends on your server 
    var data = event.target.result.replace("data:"+ file.type +";base64,", ''); 

    // make here your ajax call 
    $.ajax({ 
     url: 'and_so_on', 
     json: { 
     data: data 
     } 
    }); 

    // read data from file 
    reader.readAsDataURL(file); 

}

在服務器端，您將收到的base64可以easilly與緩衝構造

var buffer = new Buffer(data, 'base64'); 

翻譯成二進制被警告該FileReader是not supported by all browsers