Блог

Главная - Вопросы по программированию - Создать массив с локальными путями к нескольким изображениям из входных данных

Создать массив с локальными путями к нескольким изображениям из входных данных

#javascript #reactjs #input

#javascript #reactjs #ввод

Вопрос:

Я работаю над проектом React и хочу, чтобы пользователь выбирал несколько изображений из входных данных и отображал выбранные изображения в карусели.

Для этого я хочу создать массив с локальными путями указанных изображений.

 const [localURL, setLocalURl] = useState([]);

const handleFileInput = (e) => {
        e.preventDefault();
        e.persist();

 for  (let i = 0 ; i < e.target.files.length ; i  ) {
            let reader = new FileReader();
            reader.onload = () => {
                let dataURL = reader.result;
                setLocalURl([...localURL, dataURL]);
            }
            reader.onerror = (e) => {
                console.log('error al leer el archivo', e)
            }

       reader.readAsDataURL(e.target.files[i])
        }
    }  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div className="form-group custom-file">
  <label htmlFor="image" className="custom-file-label">File</label>
  <input required className="custom-file-input" type="file" name="image" accept="image/*" onChange={handleFileInput} multiple capture/>

</div>

Проблема в том, что я хочу сохранить пути к этим локальным файлам в массив, localURL в данном случае, и передать это в качестве поддержки компоненту carousel. localURL принимает только последний элемент e.target.файловый объект.

Я пробовал перебирать объект с разными функциями, но ни один из них не дает ожидаемых результатов.

Это работает только с одним изображением за раз. Как мне заставить его работать с несколькими файлами??

Ответ №1:

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

 document.querySelector('[type=file]').onchange = function(e) {
    console.log(Array.from(e.target.files, file => file.name));
}  
 <input required className="custom-file-input" type="file" name="image" accept="image/*" multiple capture/>

Комментарии:

1. Я понимаю проблему безопасности, но мне нужен способ сохранить ссылку на файл, чтобы я мог загрузить его при отправке и удалить или добавить файлы перед загрузкой, если пользователь передумает. Как я могу создать массив с этими ссылками, чтобы я мог просматривать и загружать файлы?

2. Array.from(например,target. files, file => файл) создает массив файлов. Вы можете делать с ним все, что захотите.

3. Вам не нужна функция, поскольку вы ничего не преобразуете, просто используйте Array.from(e.target.files)