我需要将我的图像转换为Base64字符串，这样我就可以将我的图像发送到服务器。
有JavaScript文件吗?否则，我如何转换它?
当前回答
document.querySelector(“输入”)。Onchange = e => { const fr = new FileReader() Fr.onloadend = () => document.write(fr.result) fr.readAsDataURL (e.target.files [0]) ｝ < input type = " file " >
其他回答
你可以使用HTML5 <canvas>:
创建一个画布，将图像加载到其中，然后使用toDataURL()来获得Base64表示(实际上，它是一个data: URL，但它包含Base64编码的图像)。
以下是我所做的:
// Author James Harrington 2014
function base64(file, callback){
var coolFile = {};
function readerOnload(e){
var base64 = btoa(e.target.result);
coolFile.base64 = base64;
callback(coolFile)
};
var reader = new FileReader();
reader.onload = readerOnload;
var file = file[0].files[0];
coolFile.filetype = file.type;
coolFile.size = file.size;
coolFile.filename = file.name;
reader.readAsBinaryString(file);
}
下面是你如何使用它
base64( $('input[type="file"]'), function(data){
console.log(data.base64)
})
这很简单。 只需调用函数并传递你的图像。 2>保存返回值并在任何需要的地方使用。
//call like this
const convertedFile = await imageToBase64(fileObj);
console.log("convertedFile",convertedFile);
//this is the required function
async function imageToBase64(image) {
const reader = new FileReader();
reader.readAsDataURL(image);
const data= await new Promise((resolve, reject) => {
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
return data;
}
export default imageToBase64;
假设您在浏览器中执行此操作:
等待:
import axios from 'axios'
const response = await axios.get(url, { responseType: 'blob' });
return window.URL.createObjectURL(response.data);
与承诺
import axios from 'axios'
const response = await axios.get(url, { responseType: 'blob' })
.then((response) => {
const dataUrl = window.URL.createObjectURL(response.data);
// do something with your url
});
您可以使用FileAPI，但它几乎不受支持。
