如何使用React将本地图像而不是URL发送到计算机视觉API

npx create-react-app image-upload

cd image-upload
npm install axios

import React, { useState } from 'react';
import axios from 'axios';

const ImageUpload = () => {
  const [selectedImage, setSelectedImage] = useState(null);

  const handleImageChange = (event) => {
    setSelectedImage(event.target.files[0]);
  };

  const handleImageUpload = () => {
    if (selectedImage) {
      const formData = new FormData();
      formData.append('image', selectedImage);

      axios.post('API_ENDPOINT_URL', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
          'API_KEY_HEADER': 'YOUR_API_KEY',
        },
      })
      .then((response) => {
        // 处理计算机视觉API的响应
        console.log(response.data);
      })
      .catch((error) => {
        // 处理错误
        console.error(error);
      });
    }
  };

  return (
    <div>
      <input type="file" onChange={handleImageChange} />
      <button onClick={handleImageUpload}>上传图像</button>
    </div>
  );
};

export default ImageUpload;

import React from 'react';
import ImageUpload from './ImageUpload';

const App = () => {
  return (
    <div>
      <h1>图像上传</h1>
      <ImageUpload />
    </div>
  );
};

export default App;

npm start