最近在開(kāi)發(fā)一個(gè)圖片上傳項(xiàng)目，需要將圖片進(jìn)行base64編碼并使用json格式上傳。在這里分享一下實(shí)現(xiàn)過(guò)程。

首先介紹一下base64編碼：

base64編碼是一種將二進(jìn)制數(shù)據(jù)轉(zhuǎn)換成ASCII字符的方法，常用于在HTTP、SMTP等協(xié)議中傳輸較長(zhǎng)的標(biāo)識(shí)信息，以保證傳輸過(guò)程的可靠性。

接下來(lái)介紹一下json格式：

JSON全稱為JavaScript Object Notation，它是一種輕量級(jí)的數(shù)據(jù)交換格式。它基于ECMAScript的一個(gè)子集，用于表示簡(jiǎn)單的數(shù)據(jù)結(jié)構(gòu)。

重點(diǎn)來(lái)了，下面的代碼展示如何將圖片轉(zhuǎn)換成base64編碼，并使用json格式上傳：

// 選擇圖片
var input = document.createElement('input');
input.type = 'file';
input.onchange = function () {
var reader = new FileReader();
reader.onload = function (e) {
// 將圖片轉(zhuǎn)換成base64編碼
var base64 = e.target.result.split(',')[1];
// 構(gòu)造json格式數(shù)據(jù)
var data = {
name: input.files[0].name,
type: input.files[0].type,
size: input.files[0].size,
base64: base64
};
// 發(fā)送請(qǐng)求
$.ajax({
type: 'POST',
url: 'http://example.com/upload',
contentType: 'application/json;charset=utf-8',
data: JSON.stringify(data),
success: function(res) {
// 請(qǐng)求成功的回調(diào)函數(shù)
},
error: function(err) {
// 請(qǐng)求失敗的回調(diào)函數(shù)
}
});
}
reader.readAsDataURL(input.files[0]);
};
input.click();

最后借用一句話“祝大家coding愉快”。