ReactJS

Question

在之前的 post 中，我得到了帮助使其在 node.js 中工作，作为将本地图像转换为二进制缓冲区数组的概念证明，但为时已晚，我不会这样做能够使用 fs in react 来完成我的本地图像文件转换。我试过使用 FileReader() 作为解决方法，但没有任何运气。我尝试过的一切都导致了以下错误消息。

 Failed to execute 'readAs*******' on 'FileReader': parameter 1 is not of type 'Blob'.

尽管文档说它可以接收文件或 blob，但我在尝试操作文件时遇到了该错误。

这是我的源代码。

import React, { useState } from "react";
import { Button, Container, Row, Col } from "react-bootstrap";
import "../../styling/FacialRecognition.css";

function FacialRecognition() {
    const [image, setImage] = useState("");

    function ProcessImage(localImage) {
       
        var reader = new FileReader();
        var imageTransformation = reader.readAsDataURL(
            localImage
        );
        console.print(imageTransformation);
    }
    return (
        <div>
            <Container fluid="xl">
                <Row>
                    <Col xs="auto">
                        <p>
                            Select a local image, and then click the
                            <b>Analyze face button.</b>
                        </p>
                    </Col>
                </Row>
                <Row>
                    <Col x="auto">
                        <label>Image to analyze: </label>
                        <input
                            type="file"
                            name="inputImage"
                            id="inputImage"
                            autoComplete="off"
                            onChange={(e) => setImage(e.target.value)}
                            style={{ width: "60%", marginLeft: "1vw" }}
                        />
                        <Button
                            variant="info"
                            onClick={() => ProcessImage(image)}>
                            Analyze face
                        </Button>
                    </Col>
                </Row>
            </Container>
        </div>
    );
}

export default FacialRecognition;

我删除了所有 api 调用，现在我只想将 binaryArrayBuffer 打印到控制台。弄清楚后，只需将其插入我的 axios api 调用就很容易了。

我从其他有类似问题的用户那里尝试过的其他更改：

  function ProcessImage(localImage) {
           
            var reader = new FileReader();
    
            var fileToRead = document.getElementById("inputImage").files[0];
    
            reader.addEventListener("loadend", function () {});
    
            var imageTransformation = reader.readAsArrayBuffer(fileToRead);
            console.log(imageTransformation);
        }

和

    function ProcessImage(localImage) {
        var reader = new FileReader();

        reader.onload = () => {
            console.log(reader.result);
        };
        var imageTransformation = reader.readAsBinaryString(localImage);
        console.log(imageTransformation);
}

两者都会导致相同的 parameter 1 is not of type Blob 错误消息。

如有任何帮助或指导，我们将不胜感激。

Answer 1

对于输入类型文件 onChange，您在 e.target.value 中没有值，但在 e.target.files 中的数组中。您可以在单次上传中访问 blob e.target.files[0]。该对象将是 File 类型，您可以访问和使用其 blob。

 onChange={(e) => setImage(e.target.files[0])}

这应该可以解决问题。

ReactJS - FileReader readAsArrayBuffer 图像文件

ReactJS - FileReader readAsArrayBuffer an image file

filereader