Как получить загруженные изображения в ответ как json, в котором файл закодирован как base64
Мой сценарий Я делаю запрос на получение с уникальным идентификатором, который собирает изображения на основе этого и возвращает json. JSON содержит всю информацию о файле и содержимое в формате base64.
вот мой компонент
import React from "react";
import { FilePond, registerPlugin } from "react-filepond";
import "filepond/dist/filepond.min.css";
// Import the Image EXIF Orientation and Image Preview plugins
// Note: These need to be installed separately
import FilePondPluginImageExifOrientation from "filepond-plugin-image-exif-orientation";
import FilePondPluginImagePreview from "filepond-plugin-image-preview";
import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css";
// Register the plugins
registerPlugin(FilePondPluginImageExifOrientation, FilePondPluginImagePreview);
// Our app
class Uploads extends React.Component {
constructor(props) {
super(props);
this.state = {
// Set initial files, type 'local' means this is a file
// that has already been uploaded to the server (see docs)
files: [
{
source:
process.env.REACT_APP_API_BASE_URL +
"uploads/" +
this.props.uploadId,
options: {
type: "local",
},
},
],
};
}
handleInit = () => {
console.log(this.pond.getFiles());
};
render() {
const serverUrl =
process.env.REACT_APP_API_BASE_URL + "uploads/" + this.props.uploadId;
const leadId = this.props.uploadId;
return (
<div className="uploads">
{/* Pass FilePond properties as attributes */}
<FilePond
ref={(ref) => (this.pond = ref)}
files={this.state.files}
allowMultiple={true}
maxTotalFileSize={10485760}
labelMaxTotalFileSize={"Total file size should be lesser than 10MB."}
maxFiles={9} //{this.props.maxFiles}
server={{
url: serverUrl,
load: (source, load, error, progress, abort, headers) => {
let filesRequest = new Request(source);
console.log(source);
fetch(source).then(function (response) {
console.log(response.json);
response.blob().then(function (myBlob) {
load(myBlob);
});
});
},
}}
imagePreviewHeight={"140px"}
oninit={() => this.handleInit()}
onupdatefiles={(fileItems) => {
// Set current file objects to this.state
this.setState({
files: fileItems.map((fileItem) => {
//console.log(fileItem);
}),
});
}}
/>
</div>
);
}
}
export default Uploads;
где я могу подключиться, чтобы сообщить полевому ответу, что нужно использовать эти данные?