如何在反應中預覽多個圖像？ 我可以預覽一個但不能預覽多個

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 state 變量成為數組而不是單個值，並將每個項目預覽設置為相應的索引。

這可能不是最佳實現，但它是對代碼的最小修改來說明這個想法：

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;