Как передать файл изображения на бэкенд python с помощью Imgur API при загрузке изображений с фронтенда React

Я пытаюсь загрузить изображение из React frontend и передать этот объект изображения в Django, Python backend, с помощью Imgur API. (imgurpython)

Моя цель - загрузить изображение в Imgur в бэкенде Python и получить url изображения из Imgur, наконец, я верну этот url обратно во фронтенд React, чтобы использовать.

Но у меня возникла проблема и я запутался, как получить этот файл изображения в Django views с помощью запроса.

Вот моя внешняя страница.

enter image description here

И вот мои коды

frontend/Screen

import React, {useState,useEffect} from 'react'
import { Link } from 'react-router-dom'
import { useDispatch, useSelector} from 'react-redux'
import { Row, Col, ListGroup, Image, Form, Button, Card } from 'react-bootstrap'
import Message from '../components/Message'
import { uploadImage } from '../actions/caseActions'

function CaseScreen({ match, location, history}) {
    const dispatch = useDispatch()
    const [image, setImage] = useState(null)

    const handleInputChange =(event) =>{

        event.preventDefault();
        console.log(event)
        console.log(event.target.files[0])
        setImage({
          image: event.target.files[0]
        });
    }
    const uploadImgurImage = (event) => {
        event.preventDefault();
        let data = new FormData(); 
     
        data.append("image", image); 
  
        dispatch(uploadImage(data)) // send to actions
        
        
    }

    
    return (
        <Row>
            <Col md={8}>
                <Card>個案頁</Card>
                

                    <form onSubmit={uploadImgurImage}>
                    <input type="file" name="image" onChange={handleInputChange}/>
                    <button>Submit</button>
                    </form>  
            </Col>
                    
        </Row>
    )
}
export default CaseScreen

frontend/uploadActions

    import axios from 'axios'
    import {
        UPLOAD_IMAGE_REQUEST ,
        UPLOAD_IMAGE_SUCCESS ,
        UPLOAD_IMAGE_FAIL,
       } from '../constants/caseConstants'
    export const uploadImage = (file) => async (dispatch, getState) => {
        
        try {
           
    
            dispatch({
                type: UPLOAD_IMAGE_REQUEST
            })
    
            console.log(file)
            const {
                userLogin: { userInfo },
            } = getState()
    
            const config = {
                headers: {
                    'Content-type': 'application/json',
                    Authorization: `Bearer ${userInfo.access}`
                }
            }
    
            const { data } = await axios.post(
                `/api/imgur/upload/`,
                file,
                config
            )
    
            dispatch({
                type:UPLOAD_IMAGE_SUCCESS,
                payload:data
                
            })
    
           
    
        } catch (error) {
            dispatch({
                type: UPLOAD_IMAGE_FAIL,
                payload: error.response && error.response.data.detail
                    ? error.response.data.detail
                    : error.message,
            })
        }
    }

backend/urls

path('api/imgur/',include('base.urls.imgur_urls')),

backend/urls/imgur_urls

path('upload/', views.upload_image, name="upload_image"),

backend/views (url:/api/imgur/upload/)

from django.shortcuts import render
from django.http import JsonResponse
from rest_framework.decorators import api_view, permission_classes
from rest_framework.permissions import IsAuthenticated, IsAdminUser
from rest_framework.response import Response

from django.contrib.auth.models import User

from rest_framework import status

from datetime import datetime
import configparser
import base.config as env
import os

from imgurpython import  ImgurClient



@api_view(['POST'])
def upload_image(request):
    data = request.data
    
    album = env.IMGUR_ALBUM
    
    image_path=data['image']

    config = configparser.ConfigParser()
    path = '/'.join((os.path.abspath(__file__).replace('\\', '/')).split('/')[:-1])
    config.read(os.path.join(path, 'auth.ini'))
    
    
    client_id = config['credentials']['client_id']
    client_secret = config['credentials']['client_secret']
    refresh_token = config['credentials']['refresh_token']
    access_token = config['credentials']['access_token']
    client = ImgurClient(client_id,client_secret, refresh_token)
    client.set_user_auth(access_token, refresh_token)   

    if client:
        config={
            'album':album,
            'name':'Ezra',
            'title':'Test',
            'description': 'Test {0}'.format(datetime.now())
        }

        print("Uploading image")
        image = client.upload_from_path(image_path,config=config,anon=False)
        print(image['link'])
        print("Done")
        return image

    else:return "Error"

Я могу выполнить эту функцию загрузки, когда я помещаю изображение в ту же папку в бэкенде. Но я хочу получить файл изображения из фронтенда, изображение, похоже, не передается в параметре "request". Поэтому image = client.upload_from_path(image_path,config=config,anon=False) не работает.

Я хочу знать, как решить эту проблему, чтобы позволить моей функции бэкенда upload_image получить объект File Object для загрузки. Спасибо.

Вернуться на верх