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

Question

import React, { useState, useRef } from 'react';

import './ImageUpload.css';

const App = () => {
const [preview, setPreview] = useState();

const changedHandler = event => {
    let files = event.target.files;
    let reader;
    let res = []; 

    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        reader = new FileReader();
        reader.readAsDataURL(file); 

        reader.onload = event => {
            setPreview(event.target.result);
        }
    }     
}

return (
    <div>
    <input
        type="file"
        name="file"
        multiple
        onChange={changedHandler} />

        {preview && <div className="image-upload__preview">
            <img src={preview} alt="Preview" />
        </div>}

    </div>
)
}

export default App;

Answer 1

Сделайте свою preview переменную состояния массивом вместо одного значения и установите для каждого элемента предварительный просмотр соответствующего индекса.

Это, вероятно, не оптимальная реализация, но это минимальная модификация вашего кода для иллюстрации идеи:

const [preview, setPreview] = useState([]); // empty array initially

for (var i = 0; i < files.length; i++) {
  var file = files[i];
  reader = new FileReader();
  reader.readAsDataURL(file); 

  reader.onload = event => {
    // update the array instead of replacing the entire value of preview
    preview[i] = event.target.result;
    setPreview([...preview]); // spread into a new array to trigger rerender
  }
} 

Answer 2

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

$

import React, { useState } from 'react';

import './ImageUpload.css';

const App = () => {
    const [preview, setPreview] = useState([]);
    const fileobj= [];

    const changedHandler = event => {
        let files = event.target.files;
        fileobj.push(files);
        let reader;

        for (var i = 0; i < fileobj[0].length; i++) {
            reader = new FileReader();
            reader.readAsDataURL(fileobj[0][i]);
            reader.onload = event => {
            preview.push(event.target.result);   // update the array instead of replacing the entire value of preview

            setPreview([...new Set(preview)]); // spread into a new array to trigger rerender
            } 
        } 
    }

    return (
        <div>
            <input
                type="file"
                name="file"
                multiple
                onChange={changedHandler} />

            <div className="form-group multi-preview">
                {(preview || []).map((url, index) => (
                    <img src={url} alt="..." key={index} style={{ height: '200px', width: '200px' }} />
                ))}
            </div>

        </div>
    )
}

export default App;