将图像转换为base64 -图像变得不可见

Question

我正在尝试将图像编码为base64，(因此我可以稍后以这种方式将其发送到后端服务器)。在使用JSON.stringify()处理包含编码图像的对象之前，一切似乎都正常。我认为它在JSON.stringify()中丢失了，我似乎找不到解决方案。这个问题我已经研究了几个星期了，但我到处都找不到答案。请帮助!

const [baseImage, setBaseImage] = useState('');
const [baseImageCorrect, setBaseImageCorrect] = useState('');
const convertBase64 = (file) => {
return new Promise((resolve, reject) => {
const fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = () => {
resolve(fileReader.result);
};
fileReader.onerror = (error) => {
reject(error);
console.log(error);
};
});
};
const uploadImage = async (e) => {
const file = e.target.files[0];
const base64 = await convertBase64(file);
const base64RemovedType = base64.split(',')[1];
setBaseImage(`${base64RemovedType}`);
};
useEffect(() => {
setBaseImageCorrect(baseImage);
console.log('current:' + baseImageCorrect);
//prints out a long string with the RIGHT information
}, [baseImage, baseImageCorrect]);

const EncodedImage = JSON.stringify({
fileBase64: (baseImageCorrect, { encoding: 'base64' }),
});
console.log(EncodedImage)
//PRINTS THIS: "fileBase64":{"encoding":"base64"}} , without the encoded image string

Answer 1

我假设你需要相同级别的密钥baseImageCorrect和encoding。

用这个代替:

const EncodedImage = JSON.stringify({
fileBase64: {baseImageCorrect, encoding: 'base64' },
});