Получить данные из экземпляра объекта filepond - PullRequest
Новая
       7

Получить данные из экземпляра объекта filepond

0 голосов
/ 25 января 2019

У меня есть форма отправки в моем проекте React, где я использую API filepond, поэтому пользователи могут отправлять файлы в форму

Я просто использую стандартный компонент FilePond, взятый из документации, поэтомудалеко. 

   <FilePond ref={ref => this.pond = ref}
                      allowMultiple={true} 
                      maxFiles={4} 
                      oninit={() => this.handleInit() }
                      onupdatefiles={(fileItems) => {
                          // Set current file objects to this.state
                          this.setState({
                              files: fileItems.map(fileItem => fileItem.file)
                          });
                      }}>

                {/* Update current files  */}
                {this.state.files.map(file => (
                    <File key={file} src={file} origin="local" 
                 />
                ))}

            </FilePond>

Я отправляю весь запрос бэкэнд-REST-серверу в java, и поэтому хочу отправить вместе с типами информации, данными (в кодировке base64) и расширениемфайл.

Я делаю это, создавая массив объектов в моем запросе 

  result: this.state.files.map(file => ({
            "file": this.findFileTypeHandler(file.name), 
            "data": this.encodeFileHandler(file)
        }))
    }

в моем encodeFileHandler, мне нужен способ конвертировать данные в base64, но я не вижу свойства, который имеет необработанные данные для файлового объекта.

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

here is an example of the properties available on the object

1 Ответ

0 голосов
/ 25 января 2019

Попробуйте Плагин кодирования файлов для filepond, он делает именно то, что вам нужно:

... он кодирует отброшенный файл как строку base64 и сохраняет строку вскрытое поле ввода в виде строки JSON.Он использует строку JSON, поэтому он также может добавлять размер файла, тип, имя и метаданные.

Использование (React):
Импорт кода плагина: 

import FilePondPluginFileEncode from 'filepond-plugin-file-encode';

Зарегистрируйте плагин: 

registerPlugin(FilePondPluginFileEncode);

Подробнее здесь

...