如何在React/Redux中允许将图片上传到Imgur？

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import Dropzone from 'react-dropzone';
import axios from 'axios';

const ImageUploader = () => {
  const dispatch = useDispatch();
  const [uploadedImageUrl, setUploadedImageUrl] = useState('');

  const handleImageUpload = async (files) => {
    const file = files[0];
    const formData = new FormData();
    formData.append('image', file);

    try {
      const response = await axios.post('https://api.imgur.com/3/image', formData, {
        headers: {
          Authorization: 'Client-ID YOUR_CLIENT_ID', // 替换为你的Imgur API Client ID
        },
      });

      const imageUrl = response.data.data.link;
      setUploadedImageUrl(imageUrl);
      dispatch({ type: 'SET_IMAGE_URL', payload: imageUrl }); // 更新Redux状态
    } catch (error) {
      console.error('Error uploading image:', error);
    }
  };

  return (
    <div>
      <Dropzone onDrop={handleImageUpload}>
        {({ getRootProps, getInputProps }) => (
          <div {...getRootProps()}>
            <input {...getInputProps()} />
            <p>将图片文件拖放到此处，或点击选择文件</p>
          </div>
        )}
      </Dropzone>
      {uploadedImageUrl && <img src={uploadedImageUrl} alt="Uploaded" />}
    </div>
  );
};

export default ImageUploader;