У меня есть простой компонент реакции. Это суть компонента:
<input ref = {inputRef} type = "file" hidden onChange = {imageSelected} />
<Button
onClick = {() => inputRef.current.click()}
icon = "upload"
size = "big"
style = {{ margin: 0, marginRight: "2px" }}
fluid
color = "green"
/>
Это функция onChange:
const imageSelected = (ev) => {
if (ev.target.files && ev.target.files[0]) {
const reader = new FileReader();
reader.onload = (e) => {
console.info(e.target.result);
};
}
};
Я не получаю никакого вывода на консоль, загрузка не срабатывает, потому что почему?
🤔 А знаете ли вы, что...
JavaScript имеет множество встроенных объектов, таких как Array, Date и Math.
Вы не говорите ему, что читать. Я предполагаю, что это изображение из именования, поэтому вы должны использовать readAsDataURL
const imageSelected = (ev) => {
const file = ev.target.files && ev.target.files[0];
if (file) {
const reader = new FileReader();
reader.addEventListener("load", function () {
cosole.log(reader.result);
}, false);
reader.readAsDataURL(file);
}
}
рабочий пример
const inp = document.querySelector('[type = "file"]');
const img = document.querySelector('img');
const imageSelected = (ev) => {
const file = ev.target.files && ev.target.files[0];
if (file) {
const reader = new FileReader();
reader.addEventListener("load", function () {
img.src = reader.result;
}, false);
reader.readAsDataURL(file);
}
}
inp.addEventListener("change", imageSelected);<input type = "file">
<img >