在 React JS 中需要字节数组形式的图像

Question

问题陈述：-

我已经在 React JS 中编写了上传图片的代码。但是，我需要将图像数据发送到服务器和数据库，这就是为什么我需要字节数组中的图像数据。 如何获取字节数组中上传的图片数据？

非常感谢有关此问题的任何帮助。

代码:-

import React, { useState } from "react";
import "./style.css";

const ImageUpload = () => {
    
  const [file, setFile] = useState(null);
  const [flag, setFlag] = useState(false);

  const fileChangedHandler = (event) => {
    let file = event.target.files[0];
    let reader = new FileReader();

    console.log(file);
    reader.onload = function (e) {
      setFile(e.target.result);
      setFlag(true)
    };
    reader.readAsDataURL(event.target.files[0]);


  };
  return (
    <div id="modeling">
      <div className="container">
        <div className="row">
          <div className="col">
            <div className="modeling-text">
            </div>
          </div>
        </div>
       
       {flag ?  <img
          src={file}
          alt={""}
          width="190"
          height="220"
          text-align="left"
          style={{ display: "block" }}
        />: <img 
        src="./Image_Placeholder.jpeg"
          alt={""}
          width="190"
          height="220"
          text-align="left"
          style={{ display: "block" }}/>}
        
      </div>
      <div className="input-group mt-1 offset-1">
                <div className="custom-file smaller-input">
                  <input
                    type="file"
                    className="custom-file-input"
                    name="file"
                    inputprops={{ accept: "image/*" }}
                    accept=".png,.jpg,.jpeg"
                    onChange={fileChangedHandler}
                    id="inputGroupFile01"
                  />
                  
                 <label className="custom-file-label" htmlFor="inputGroupFile01">  Choose your image
                  </label>
                  <i className="bi bi-cloud-upload"></i>
                </div>
              </div>
    </div>
  );
};

export default ImageUpload;

Answer 1

您可以使用 FormData 将您的文件发送到服务器。

const formData = new FormData()
if (file) {
  formData.append('file', file, file.name)
}

axios.post(`/upload`, formData, {
  headers: {
    'Content-Type': 'multipart/form-data',
  },
})

在 React JS 中需要字节数组形式的图像

Need image in the form of Byte Array in React JS

javascript

file-upload

reactjs

react-hooks