时间戳

首页 > 解决方案 > Filepond提取base64反应js

javascript - Filepond提取base64反应js

问题描述

尝试从图像上传中获取 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);

标签： javascriptreactjsfilepond

解决方案

最新版本的文件编码插件为文件项增加了两种方法。getFileEncodeBase64String和getFileEncodeDataURL。这些应该有助于实现您想要做的事情，而无需实际读取隐藏文件输入元素。

有关更多信息，请参阅文档：https ://pqina.nl/filepond/docs/patterns/plugins/file-encode/

推荐阅读