filepond потребляет данные с сервера как json - PullRequest
0 голосов
/ 06 мая 2020

Как получить загруженные изображения в ответ как 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;

где я могу подключиться, чтобы сообщить полевому ответу, что нужно использовать эти данные?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...