Filepond提取base64反应js

Question

Trying to get a base64 from image upload and send it to the server. with other values, i can get the value of the hidden inputs. Api is configured to take 2 files at a time, so i cant process the uploads separately at this point

Having trouble mapping the 'data' from the upload image's value i have tried simple mapping methods but still failing.

My code below

    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);

Answer 1

The latest version of the file encode plugin adds two methods to the file items. getFileEncodeBase64String and getFileEncodeDataURL . Those should help achieve what you're trying to do without actually having to read the hidden file input elements.

See docs for further info: https://pqina.nl/filepond/docs/patterns/plugins/file-encode/

Answer 2

I installed and tryied to use file-encode pluggin(using vue-filepond) from filepond (see getEncodedData() method )but i get this error this.$refs.pond.getFileEncodeDataURL is not a function. the code:

<template>
  <div>
    <FilePond
      name="test"
      ref="pond"
      allowFileEncode="true"
      required="false"
      allow-multiple="true"
      :max-files="maxFiles"
      class-name="my-pond"
      :label-idle="label"
      :capture-method="null"
      aallowImageTransform="true"
      imageTransformOutputQuality="30"
      imageTransformOutputMimeType="image/png"
      allowImageResize="true"
      imageResizeTargetWidth="150"
      imageResizeTargetHeight="88"
      imageResizeMode="cover"
      accepted-file-types="image/jpeg, image/png"
      v-on:init="handleFilePondInit"
    />
  </div>
</template>

<script>
//issue url https://github.com/pqina/vue-filepond/issues/234
// Import FilePond
import vueFilePond from 'vue-filepond'

// Import plugins
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.esm.js'
import FilePondPluginImagePreview from 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.esm.js'
import FilePondPluginFileEncode from 'filepond-plugin-file-encode/dist/filepond-plugin-file-encode.js'

// Import styles
import 'filepond/dist/filepond.min.css'
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css'

// Create FilePond component
const FilePond = vueFilePond(
  FilePondPluginFileValidateType,
  FilePondPluginImagePreview,
  FilePondPluginFileEncode
)

export default {
  props: {
    maxFiles: { type: Number, default: 1 },
    label: { type: String, required: true },
  },

  methods: {
    handleFilePondInit: function () {
      console.log('FilePond has initialized new')

      // example of instance method call on pond reference
      this.$refs.pond.getFiles()
    },
    getPondFiles() {
      return this.$refs.pond.getFiles()
    },
    addFiles(blob) {
      this.$refs.pond.addFile(blob)
    },
    getEncodedData() {
      this.$refs.pond.getFileEncodeDataURL()
    },
  },
  components: {
    FilePond,
  },
}
</script>
<style>
.filepond--file-action-button {
  cursor: pointer;
}
</style>