使用单个函数将多个图像转换为64进制

Question

我正在解决一个问题，我必须从用户处获取三个图像作为输入，并且必须通过将它们转换为Base64将它们发送到后端。我知道如何为单个输入文件做这件事，但不能为多个输入文件工作。

我想有一个单一的函数，可以将图像转换为Base64 &将每个图像的值存储在单独的变量中。请帮我解决这个问题。

以下是我用于单个输入的代码，即第一个图像.

<div class="first_div">
<label for="first_image">First Image</label>
<input name="first_image" type="file" accept="image/*" id="first_image" class="img_file">
</div>
<div class="second_div">
<label for="second_image">Second Image</label>
<input name="second_image" type="file" accept="image/*" id="second_image" class="img_file">
</div>
<div class="third_div">
<label for="third_image">Third Image</label>
<input name="third_image" type="file" accept="image/*" id="third_image" class="img_file">
</div>
<button onclick="submitImages()">Submit</button>

JAVASCRIPT代码

let encoded_image;
function getBase64(file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
console.log(reader.result);
encoded_image = reader.result;
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
}

const submitImages = () => {
var files = document.getElementById('first_image').files[0];
if (files.length > 0) {
getBase64(files[0]);
}
const formData = new URLSearchParams(new FormData());
formData.append("first_image", encoded_image);
fetch(API CALL HERE)
}

我想创建一个函数，从所有三个字段输入，将它们转换为Base64 &存储在一个变量中。这样我就可以把它附加到form data

Answer 1

选择所有输入，循环并获取每个文件的base64试试这个

const getBase64 = (file) =>
new Promise((resolve, reject) => {
console.log(file);
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = (err) => reject(err);
});
const submitImages = async () => {
const imageInputs = document.querySelectorAll("input");
const images = await Promise.all(
[...imageInputs].map((imageInput) =>
imageInput?.files?.[0] ? getBase64(imageInput.files[0]) : null
)
);
console.log(images);
};

Answer 2

这个例子是在React中，但是你可以很容易地把它修改成标准的javascript。

如果是标准的javascript，就把const [images, setImages] = useState([]);改成let images = []。

const [images, setImages] = useState([]);
const formatImage = async() => {
try {
for (let i = 0; i < e.target.files.length; i++) {
const reader = new FileReader();
reader.readAsDataURL(e.target.files[i]);
reader.onload = (readerEvent) => {
images.push(readerEvent.target ? .result);
};
}
} catch (error) {
console.log(error);
}
};

<input type="file" multiple onChange={formatImage} />

这里是把这些图像放在Firebase Firestore上的一个例子，如果它是标准的javascript更改setImages([])到images = []

const addImage = async() => {
try {
Promise.all(
images.map(
async(file: any) =>
await addDoc(collection(db, "images"), {
image: file,
date: Timestamp.now(),
})
)
);
setImages([]);
} catch (error) {
console.log(error);
}
};