carga de imágenes múltiples con vista previa y eliminación de ejemplo de código de reacción js

Esta reseña fue aprobado por expertos para que tengas la garantía de la veracidad de nuestro contenido.

Ejemplo: carga de imágenes múltiples con vista previa y eliminar reaccionar js

importReact,Componentfrom'react';importIcon,Button,Imagefrom"semantic-ui-react";importCompressfrom"compress.js";// It renders "<" icon, on clicking it gets the earlier photo.const BackArrow = (props) => (  
      
);// It renders ">" icon, on clicking it gets the next photo.const NextArrow = (props) => (  
      
);class ImageUploader extends Component  state =   pictures: [],          // to store the pictures in base64 format.  slideCount: 0         //to keep track of the photo number nextImage = () =>   let  slideCount  = this.state;  if(slideCount !== this.state.pictures.length - 1)    slideCount = slideCount + 1;    this.setState( slideCount ); previousImage = () =>   let  slideCount  = this.state;  if(slideCount !== 0)    slideCount = slideCount - 1;    this.setState( slideCount ); handleImageChange = e =>   e.preventDefault();// Getting multiple images from user's selection  for (var i = 0; i < e.target.files.length; i++)    let file = e.target.files[i];   // console.log(file);   if(!file.type.includes('image'))     alert('Please choose image');    else if(file.size / (1024*1024) > 5)     alert('Please choose image of smaller size');        const compress = new Compress();  const files = [...e.target.files];  compress.compress(files,    size: 4,   quality: 0.75,   maxWidth: 1920,   maxHeight: 1920,   resize: true  ).then(modFiles =>               // modFiles are modified files with exif free and compressed       //  versions of user selected images   let uploadableFiles = [];      for (var i = modFiles.length - 1; i >= 0; i--)     let file = Compress.convertBase64ToFile(modFiles[i].data, modFiles[i].ext);    let filename = Date.now() + modFiles[i].alt;    let filetype = modFiles[i].ext;    let filelastMod = files[i].lastModified;    uploadableFiles.push(new File([file], filename, type: filetype, lastModified: filelastMod));       let img = new Image();    let obj;    img.onload = () =>      obj =  width: img.width, height: img.height ;     this.setState( pictures: [ ...this.state.pictures, obj ] );        img.src = modFiles[i].prefix + modFiles[i].data;  ); render()   const  pictures, slideCount  = this.state;return (   
     pictures.length > 0 ? (      
       pictures.map((photo, key) =>              if (pictures.indexOf(photo) === slideCount)                return (                 
                  slideCount !== 0 ?  : ''                  
                       pictures.length > 1 && (            
             slideCount+1 of pictures.length            
           )                   
                   slideCount !== (pictures.length - 1) ?  : ''                   
               )                            return ''          )       
               
      
     ) : (        
          /* An image is shown instead of input type="file" button. When user clicks on it, he can select the images from his gadget. */         





                       
     )       
  ); export default ImageUploader;

Si haces scroll puedes encontrar las referencias de otros sys admins, tú incluso tienes el poder dejar el tuyo si lo deseas.

Utiliza Nuestro Buscador