[英]Upload base64 image with Ajax
我的客戶為用戶提供了選擇圖片,裁剪並調整其大小然后顯示的信息(在<img>
DOM元素中)。
如果圖片很好,用戶可以將其上傳到服務器以便保存。
由於Ajax請求,我想上傳。
我在互聯網上找到了大量示例,可以上傳從客戶端PC檢索的原始圖像 。 例如:
$( '#my-form' )
.submit( function( e ) {
$.ajax( {
url: 'http://host.com/action/',
type: 'POST',
data: new FormData( this ),
processData: false,
contentType: false
} );
e.preventDefault();
} );
如果我決定上載通過表單輸入檢索的圖片,則此方法正常工作。
就我而言,我想上傳修改后的圖片 (保存在<img>
元素中)而不是原始圖片。
此圖片存儲為base64圖片(有關信息:我使用croppie.js庫生成了圖像)。
我不知道如何用Ajax上傳這張照片。
我試圖將其作為常規參數上傳,但是在服務器端,img是一個空字符串:
var url = 'http://host.com/action/';
var data = {};
data.img = $('img#generated-image').attr('src');
$.ajax({url: url, type: "POST", data: data})
.done(function(e){
// Do something
});
// RESULTS in a empty data.img on the server side.
我的問題是服務器在檢索“ img”參數時具有空字符串。 我懷疑圖片可能太大而無法傳遞到服務器或其他我不理解的問題...。
因此,我想知道使用Ajax請求而不使用表單將base64圖像發送到服務器的正確方法是什么。
謝謝你的幫助。
編輯
似乎是xmlHTTP POST參數大小問題。 我試圖減少圖像的字符串表示形式的字符數,服務器現在可以檢索它。
編輯2
php.ini文件中的post_max_size設置為8M,而圖片大小僅為24K。 因此問題不存在。
我在Symfony2框架上使用PHP。
也許是Symfony2的限制。
我最終決定將base64圖像轉換為Blob,以便可以通過帶有formData對象的Ajax請求將其發送,如下所示。 它節省了上傳帶寬(base64比其二進制等效項多占用33%的位),而且我找不到不傳輸base64參數的原因(由於一定的大小限制)。
base64ToBlob函數基於對另一個問題的回答 。
function base64ToBlob(base64, mime)
{
mime = mime || '';
var sliceSize = 1024;
var byteChars = window.atob(base64);
var byteArrays = [];
for (var offset = 0, len = byteChars.length; offset < len; offset += sliceSize) {
var slice = byteChars.slice(offset, offset + sliceSize);
var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
return new Blob(byteArrays, {type: mime});
}
我的JS代碼:
var url = "url/action";
var image = $('#image-id').attr('src');
var base64ImageContent = image.replace(/^data:image\/(png|jpg);base64,/, "");
var blob = base64ToBlob(base64ImageContent, 'image/png');
var formData = new FormData();
formData.append('picture', blob);
$.ajax({
url: url,
type: "POST",
cache: false,
contentType: false,
processData: false,
data: formData})
.done(function(e){
alert('done!');
});
在Symfony2中,由於以下原因,我可以檢索圖像:
$picture = $request->files->get('picture');
Nitseg的答案很好。 另外,如果您必須在ajax調用中使用auth令牌,我想添加以下幾行。 同樣,請先查看Nitseg的答案以獲取更多詳細信息。
var formData = new FormData();
var token = "<YOUR-TOKEN-HERE>";
formData.append("uploadfile", mediaBlob);
jQuery.ajax({
url: url,
type: "POST",
cache: false,
contentType: false,
processData: false,
data: formData,
beforeSend: function (xhr){
xhr.setRequestHeader("Authorization", "Bearer " + token);
}
})
.done((e) => {
// It is done.
})
.fail((e) => {
// Report that there is a problem!
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.