Попытка получить base64 из загрузки изображения и отправить его на сервер. с другими значениями я могу получить значение скрытых входов. API настроен на одновременное получение 2 файлов, поэтому на данный момент я не могу обрабатывать загрузки по отдельности.
Возникли проблемы с отображением «данных» из значения загружаемого изображения, я пробовал простые методы сопоставления, но все еще терпел неудачу.
Мой код ниже
import React, { Component } from 'react';
import {connect} from 'react-redux'
import {Button} from 'antd'
import IntlMessages from '../utility/intlMessages';
import authActions from '../../redux/auth/actions'
import { apiUrl } from '../../config';
import { FilePond, registerPlugin } from 'react-filepond';
import 'filepond/dist/filepond.min.css';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation';
import FilePondPluginImageTransform from 'filepond-plugin-image-transform';
import FilePondPluginFileEncode from 'filepond-plugin-file-encode';
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';
registerPlugin(FilePondPluginImagePreview,
FilePondPluginImageExifOrientation, FilePondPluginImageTransform, FilePondPluginFileEncode);
const { kycUploadDocs } = authActions;
class FilePondCompnent extends Component {
constructor(props) {
super(props);
this.state = {
files: [],
base64files: []
};
}
handleFilesUpdate() {
let munei = document.querySelector('.filepond--file-wrapper');
if (this.pond.getFiles().length === 2) {
const input = munei.querySelectorAll('input[type = "hidden"]')[0]
console.info(input.value)
base64map => {
this.setState({
base64files: input.value.map(req => req.data)
});
}
}
}
handleInit() {
console.info("FilePond instance has initialised", this.pond);
}
render() {
return (
<div className = "munei">
{/* Pass FilePond properties as attributes */}
<FilePond
ref = {ref => (this.pond = ref)}
files = {this.state.files}
allowMultiple = {true}
maxFiles = {2}
instantUpload = {false}
allowRevert = {false}
allowFileEncode = {true}
// oninit = {() => this.handleInit()}
onupdatefiles = {fileItems => {
// Set currently active file objects to this.state
this.setState({
files: fileItems.map(fileItem => fileItem.file)
});
this.handleFilesUpdate()
}}
/>
</div>
);
}
}
export default connect((state, ownProps) => ({
// isLoading: state.App.get('isLoading'),
// balances: state.Funds.get(ownProps.fund+'_balances'),
}),
{ kycUploadDocs }
)(FilePondCompnent);



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


В последней версии плагина кодирования файлов к элементам файла добавлены два метода. getFileEncodeBase64String и getFileEncodeDataURL. Это должно помочь достичь того, что вы пытаетесь сделать, фактически не читая скрытые элементы ввода файла.
См. документы для получения дополнительной информации: https://pqina.nl/filepond/docs/patterns/plugins/file-encode/
@geoidesic исправлено
Ссылка ведет на 404