Отображать изображения из парсеров multipart / form-data без сохранения - PullRequest
Новая
       36

Отображать изображения из парсеров multipart / form-data без сохранения

0 голосов
/ 09 февраля 2019

В этом вопросе изображения, загруженные с помощью анализаторов multipart / form-data, сохраняются во временной папке const tempPath = req.file.path.Затем они копируются в указанный каталог const targetPath = path.join(__dirname, "./uploads/image.png"); Эти изображения затем могут отображаться как <img src="/uploads/image.png" />

Я понимаю, что браузер не может отобразить изображение во временной папке системы.Есть ли другой способ отображения изображений без их копирования, как указано выше?Могу ли я конвертировать req.file для отображения в <img />?

1 Ответ

0 голосов
/ 09 февраля 2019

Вы можете отобразить изображение на стороне клиента без отправки изображения на сторону сервера, прослушивая событие onChange для ввода с типом файла.Вот как я это делаю с ReactJS ( Демо на CodeSandbox ) 

class App extends React.Component {
    state = { imageSrc: '' };

    onImageChange = (event) => {
        if(event.target.files.length !== 0) {
            const reader = new FileReader();

            reader.onload = (e) => {
            this.setState({ imageSrc: e.target.result });
        }

        reader.readAsDataURL(event.target.files[0]);
    }
 }

  render() {
        return (
            <div className="App">
                <input type="file" accept="image/*" onChange={this.onImageChange} />
                {this.state.imageSrc ? <img src={this.state.imageSrc} /> : null}
            </div>
        );
   }
}

Надеюсь, это поможет.Дайте мне знать, если я неправильно понимаю ваш вопрос

...