сделать несколько фотографий и загрузить их одновременно на устройство с помощью атрибута захвата HTML5 - PullRequest
Новая
       10

сделать несколько фотографий и загрузить их одновременно на устройство с помощью атрибута захвата HTML5

0 голосов
/ 20 октября 2019

Я создаю веб-приложение, которое берет изображения из тега ввода и загружает их на сервер, когда я нажимаю «отправить». Я пытаюсь разрешить пользователю делать несколько снимков на устройстве и загружать их все сразу, не прося пользователя нажимать кнопку «Отправить» каждый раз, когда делается снимок, пока приложение работает на мобильном устройстве с одним снимком и накомпьютер с несколькими загружаемыми файлами изображений.

вот мой конструктор: 

constructor(props) {
    super(props);
    this.state = {
        response: '', //API calls
        post: '',//API calls
    };
    this.fileList = []
}

это то, что я использую для запроса изображения: 

<form onSubmit={this.handleSubmit}}>
    <input type="file" accept="image/*" capture="camera" onChange={this.handleChange} multiple="multiple" />
    <input type="submit" value="Submit" />
</form>

иЯ обрабатываю список файлов следующим образом: 

handleChange = (event) => {
    event.preventDefault();
    for (const i of event.target.files) {
        this.fileList.push(i);
    }
}

, и как только я нажимаю «отправить», вот как его обрабатывает: 

handleSubmit = (event) => {
    event.preventDefault();
    let data = new FormData();
    data.append('profileImage', this.fileList);
    fetch('/api/upload', { some code goes here}).catch('handle errors here'); // 
}

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

...