Блог

У меня есть простой компонент react, в этом суть компонента:

 <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 amp;amp; ev.target.files[0]) {
      const reader = new FileReader();
      reader.onload = (e) => {
        console.log(e.target.result);
      };
    }
  };
 

Я не получаю никаких выходных данных на консоль, загрузка не запускается, потому что, почему это?

Вы не указываете ему, что читать. Я предполагаю, что это изображение из именования, поэтому вы должны использовать readAsDataURL

 const imageSelected = (ev) => {
  const file = ev.target.files amp;amp; 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 amp;amp; 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 >