如何在 React/NextJS 中使用 AWS Textract

Question

嘿，我希望有人可以帮我整理一下，甚至只是为我指明正确的方向。我希望我至少接近/在正确的轨道上。

首先我使用this。

我的代码如下。

更新：错误：err TypeError: input.filter is not a function 谁能让我确切地知道我需要什么参数。我正在尝试只使用我上传的图片的 base64 版本。

谢谢

import React from 'react'
import { TextractClient, AnalyzeDocumentCommand } from '@aws-sdk/client-textract'


class Textract extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      src: null,
    }

    this.onRunOCR = this.onRunOCR.bind(this)
  }

  onRunOCR = async (event) => {

    const client = new TextractClient({
      region: 'ap-southeast-2',
      credentials: {
        accessKeyId: 'MYaccessKeyId',
        secretAccessKey: 'MYsecretAccessKey',
      },
    })
    const params = {
      Document: {
        Bytes: this.state.src,
      },
    }
    const command = new AnalyzeDocumentCommand(params)
    try {
      const data = await client.send(command)
      console.log('data', data)
      // process data.
    } catch (error) {
      console.log('err', error)
      // error handling.
    } finally {
      // finally.
    }
    console.log('Done')
  }

  onSelectFile = (evt) => {
    var self = this
    var reader = new FileReader()
    var file = evt.target.files[0]

    reader.onload = function (upload) {
      self.setState(
        {
          src: upload.target.result,
        },
        function () {
          console.log(self.state.image)
        }
      )
    }
    reader.readAsDataURL(file)
  }

  render() {
    return (
      <div>
        <div>
              <label htmlFor="file">
                Image
                <input
                  className="inputfile"
                  id="file"
                  type="file"
                  name="file"
                  onChange={(e) => {
                    this.onSelectFile(e)
                  }}
                />
              </label>
        </div>
        <div>
            <div onClick={this.onRunOCR}>
              Run Autofill
            </div>
        </div>
      </div>
    )
  }
}

export default Textract

Answer 1

向我的优势低头。您知道，当您在打开的 1000 个标签中单击垃圾邮件以尝试修复某些问题时。我刚刚经历了那个。现在你可以了。这里是。用简单的英语。不要再看了。 Ctrl + C，Ctrl V....

onRunOCR = async (event) => {    
    const client = new TextractClient({
      region: 'ap-southeast-2',
      credentials: {
        accessKeyId: 'XXXX',
        secretAccessKey: 'XXXX',
      },
    })
    const byteArray = new Buffer(this.state.src.replace(/^[\w\d;:\/]+base64\,/g, ''), 'base64')
    const params = {
      Document: {
        Bytes: byteArray,
      },
    }
    const command = new DetectDocumentTextCommand(params)
    try {
      const data = await client.send(command)
      console.log('data', data)
      // process data.
    } catch (error) {
      console.log('err', error)
      // error handling.
    } finally {
      // finally.
    }
  }

  onSelectFile = (evt) => {
    console.log('Uploading')
    var self = this
    var reader = new FileReader()
    var file = evt.target.files[0]

    reader.onload = function (upload) {
      self.setState(
        {
          src: upload.target.result,
        },
        function () {
          console.log(self.state.image)
        }
      )
    }
    reader.readAsDataURL(file)
    console.log('Uploaded')
  }


 <input
      className="inputfile"
      id="file"
      type="file"
      name="file"
      onChange={(e) => {
          this.onSelectFile(e)
      }}
  />

如果上帝可以编码，我想它会像上面那样。