Блог

Я пытаюсь загружать изображения с помощью react js, но я не могу загружать несколько изображений одновременно, даже если я ввел несколько.

 <input type="file" title="" className={styles.inputFile} multiple={true} onChange={handleChange} />

 const [formData, setFormData] = useState({
    orgId: "6114285831310bfd5b09c28178e",
    orgWallpaper: [],
  }); 

const handleChange = (e) => {
    if (e.target.files amp;amp; e.target.files[0]) {
      setFormData((form) => ({
        ...form,
        orgWallpaper: [...form.orgWallpaper, URL.createObjectURL(e.target.files[0])],
      }));
    }
  };

{formData?.orgWallpaper?.map((item, key) => (
                  {console.log(item, "mapitem")}
                  <img className={styles.wallpapers   " "   styles.active} src={item} alt="" />
 

Вы должны измениться handleChange , как показано ниже

 const {useState} = React;

const MultipleFilesUpload = () => {
  const [formData, setFormData] = useState({
    orgId: "6114285831310bfd5b09c28178e",
    orgWallpaper: [],
  });

  const handleChange = (e) => {
    var files = e.target.files;
   for (let i = 0; i <files.length; i  ) {
   setFormData((form) => ({
        ...form,
        orgWallpaper: [...form.orgWallpaper, URL.createObjectURL(files[i])]})
        )}};
        
  return ( 
  <div>
      <input type="file" title="" multiple onChange={handleChange}/> 
      <div class="gallery">
      {
      formData.orgWallpaper.map((item, key) =>
        <img width ="48px" src ={item} alt= "" />
      )} 
      </div> 
   </div>
)};

ReactDOM.render( <MultipleFilesUpload/> ,
  document.getElementById("root")
); 

 .gallery {
  display: flex;
}

.gallery img {
  margin: 10px;
} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div> 

Вы можете проверить это :

 ...(e.target.files?.map(file=>URL.createObjectURL(file))??[])
 

а также удалите журнал консоли, это фактически нарушает синтаксис возврата. Если вы хотите проверить консоль.войдите в журнал, а затем также напишите возврат :

  {formData?.orgWallpaper?.map((item, key) => ( <img key={key} className={styles.wallpapers   " "   styles.active} src={item} alt="" />)
    }