Блог

В предыдущем посте я получил помощь в его работе node.js в качестве доказательства концепции преобразования локальных изображений в двоичные буферные массивы, но слишком поздно понял, что я не смогу использовать fs in react для завершения преобразования моего локального файла изображения. Я пытался использовать FileReader() в качестве обходного пути, но безуспешно. Все, что я пробовал, привело к следующему сообщению об ошибке.

  Failed to execute 'readAs*******' on 'FileReader': parameter 1 is not of type '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 сообщению об ошибке.

Любая помощь или рекомендации по этому вопросу будут оценены.

Для ввода типа file onChange у вас есть значение не в e.target.value , а в массиве in e.target.files . Вы можете получить доступ к большому двоичному объекту за одну загрузку e.target.files[0] . Объект будет иметь тип файла, к которому вы можете получить доступ и работать с ним.

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

это должно устранить проблему.