有没有办法从目录中加载图像从输入type =“ file”输入并将其转换为reactjs中的blob？

如何解决有没有办法从目录中加载图像从输入type =“ file”输入并将其转换为reactjs中的blob？

我正在构建一个在第一页上具有目录输入的应用程序（名为import）。提交时，它应在目录中显示图像（名为select）。问题在于显示图像。

由于浏览器的安全性，我只能得到一个相对目录。所以我已经从相对链接中加载了它们，但是可以吗？

Import.Js

export default function Import(props) {
    let history = useHistory();

    function onValueChange(event) {
        event.preventDefault();
    }

    function submit(event) {
        if (event.target.children[0].children[1].files.length === 0) return;
        event.preventDefault();
        props.onFolderSubmit(event);
        history.push('/select');
    }

    return (
        <div>
            <h1>Import</h1>

            <Container>
                <Form inline onSubmit={submit}>
                    <Form.Group controlId="formDirectory">
                        <Form.Label>Choose directory</Form.Label>
                        <Form.Control type="file"
                                      webkitdirectory="true"
                                      directory="true"
                                      multiple
                        />

                    </Form.Group>
                    <Button variant="primary" type="submit">
                        Submit
                    </Button>
                </Form>
            </Container>
        </div>
    );
}

Select.js

export default function Select(props) {
    let history = useHistory();
    if (props.files.length === 0) history.push('/');

    function onSubmit() {
        history.push('/export');
    }

    return (
        <div>
            <h1>Select</h1>
            {
/// change code below

                props.files.map(
                    file =>
                        <div key={file.name}>
                            <p>{file.name}</p>
                            <img src={file.webkitRelativePath}/>
                        </div>
                )
            }
/// change code above

        </div>
    );
}

我找到了一种在stackoverflow上加载和转换图像的方法，这里是link。但是我不知道如何在代码中实现它，因为它应该加载多个图像。有人可以帮我吗？