Как загрузить фотографию в файл с помощью кнопки "Отправить"?

Question

Я использую filepond для загрузки изображений в реакцию. Я хочу обрабатывать свои изображения, используя кнопку отправки вместо обработки по пруду. Я пробовал несколько способов, но не сработало

               <FilePond
                    ref={ref => (this.pond = ref)}
                    allowMultiple={true}
                    maxFiles={3}
                    acceptedFileTypes={['image/*']}
                    instantUpload={false}
                    onaddfileprogress={(file, progress) => console.log(file, progress)}
                    server={{
                        process: this.process
                    }}
                    oninit={() => this.handleInit()}
                    onupdatefiles={fileItems => {
                        console.log(fileItems[0].file)
                        // Set currently active file objects to this.state
                        this.setState({
                            files: fileItems.map(fileItem => fileItem.file)
                        });
                    }}
                />
                <button onClick={this.handleClick}>submit</button></> 

Я хочу отправить на сервер API с помощью этой пользовательской кнопки, не используя реквизиты сервера, предоставляемые файловым прудом. я могу написать обычный xhr запрос на отправку файла, но я теряю способность получать прогресс и многие другие состояния, которые предоставляет файл pond. Как я могу вручную запустить эту загрузку. Любое руководство будет полезно.

Answer 1

Вы можете использовать ссылку на processFile, т.е.

this.pond.processFiles();

Примечание: вам нужно сослаться на доступ к этому свойству.

Ссылка: https://pqina.nl/filepond/docs/patterns/api/filepond-instance/