Javascript Filepond正在提取base64

正在尝试从图像上载获取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.log(input.value)

      base64map => {
        this.setState({
          base64files: input.value.map(req => req.data)
        });
      }


    }

  }
  handleInit() {
    console.log("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);

import React，{Component}来自'React'；
从“react redux”导入{connect}
从“antd”导入{Button}
从“../utility/IntlMessages”导入IntlMessages；
从“../../redux/auth/actions”导入authActions
从“../../config”导入{APIRL}；
从'react FilePond'导入{FilePond，registerPlugin}；
导入“filepond/dist/filepond.min.css”；
从“filepond插件图像预览”导入FilePondPluginImagePreview；
从“文件池插件图像exif方向”导入文件池插件图像exif方向；
从“filepond插件图像转换”导入FilePondPluginImageTransform；
从“filepond插件文件编码”导入FilePondPluginFileEncode；
导入“filepond plugin image preview/dist/filepond plugin image preview.min.css”；
registerPlugin（文件PondPluginImagePreview，
FilePondPluginImageExiforOrientation、FilePondPluginImageTransform、FilePondPluginFileEncode）；
const{kycUploadDocs}=authActions；
类FilePondComponent扩展组件{
建造师（道具）{
超级（道具）；
此.state={
文件：[]，
base64文件：[]
};
}
handleFilesUpdate（）{
让munei=document.querySelector（'.filepond--file wrapper'）；
if（this.pond.getFiles（）.length==2）{
const input=munei.querySelectorAll（'input[type=“hidden”]”）[0]
console.log（input.value）
base64map=>{
这是我的国家({
base64文件：input.value.map（req=>req.data）
});
}
}
}
handleInit（）{
log（“FilePond实例已初始化”，this.pond）；
}
render（）{
返回(
{/*将FilePond属性作为属性传递*/}
（this.pond=ref）}
files={this.state.files}
allowMultiple={true}
maxFiles={2}
instantUpload={false}
allowRevert={false}
allowFileEncode={true}
//oninit={（）=>this.handleInit（）}
onUpdate文件={fileItems=>{
//将当前活动的文件对象设置为this.state
这是我的国家({
文件：fileItems.map（fileItem=>fileItem.file）
});
this.handleFilesUpdate（）
}}
/>
);
}
}
导出默认连接（（状态，ownProps）=>({
//isLoading:state.App.get（'isLoading'），
//余额：state.Funds.get（ownProps.fund+“U余额”），
}),
{kycUploadDocs}
)（FilePondComponent）；

最新版本的文件编码插件为文件项添加了两种方法

getFileEncodeBase64String

和

getFileEncodeDataURL

。这些应该有助于实现您想要做的事情，而无需实际读取隐藏的文件输入元素

---

有关更多信息，请参阅文档：

最新版本的文件编码插件为文件项添加了两种方法

getFileEncodeBase64String

和

getFileEncodeDataURL

。这些应该有助于实现您想要做的事情，而无需实际读取隐藏的文件输入元素

有关更多信息，请参见文档：