我正在嘗試將影像發送到我的快速后端。我嘗試將影像直接添加到我的帖子請求正文中。
var imgValue = document.getElementById("image").value;
在我的帖子請求中
body : JSON.stringify({
image:imgValue
})
訪問后端的影像只會給我檔案的名稱。有什么方法可以將影像編碼為前端本身的 base64 字串？
uj5u.com熱心網友回復：
您需要將影像加載到臨時 img 元素中，然后在臨時元素加載影像時將其轉換為 base64。
將影像用作 img.src = (YourImageSource)
然后，您可以從 onl oad 函式檢索 base64 值。
var imgEl = document.createElement('img');
imgEl.onload = function(){
var canvas = document.createElement('canvas');
canvas.width = this.width;
canvas.height = this.height;
var ctx = canvas.getContext('2d');
ctx.drawImage(this,0,0);
const d = canvas.toDataURL('image/jpeg');
console.log('base64',d);
};
imgEl.src = img;uj5u.com熱心網友回復：
運行下面的代碼，如果您已經上傳了檔案，那么控制臺將顯示檔案的 base64 該示例僅適用于第一個檔案。如果您需要上傳多個檔案。您可以回圈制作它。
document.getElementById("image").files;
使用 files 陣列獲取每個檔案的 base64。
var file = document.getElementById("image").files[0];
var reader = new FileReader();
reader.onload = function (r) {
var fileInfo = new Object();
fileInfo.name = file.name;
fileInfo.size = file.size;
fileInfo.extension = file.name.split(".")[file.name.split(".").length - 1];
console.log(r.target.result.split("base64,")[1]);
};
reader.onerror = function () {
throw new Error(`unknown error while converting file to ${defaultOptions.dataType}`);
};
reader.readAsDataURL(file);
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/527601.html
上一篇：用點完成句子后如何為句子換行？
下一篇：如何使用客戶端從服務器運行GUI