Как передать файл изображения на бэкенд python с помощью Imgur API при загрузке изображений с фронтенда React
Я пытаюсь загрузить изображение из React frontend и передать этот объект изображения в Django, Python backend, с помощью Imgur API. (imgurpython)
Моя цель - загрузить изображение в Imgur в бэкенде Python и получить url изображения из Imgur, наконец, я верну этот url обратно во фронтенд React, чтобы использовать.
Но у меня возникла проблема и я запутался, как получить этот файл изображения в Django views с помощью запроса.
Вот моя внешняя страница.
И вот мои коды
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 для загрузки.
Спасибо.