feat:Reactからバックエンドへの画像渡し処理

[yuuki-hi]

画像をバックエンドに送り、返り値を受け取っている部分のコード。fetchでデータを送り、responseに返り値を受け取っている

[yuuki-hi]

import React, { useRef } from 'react' import { API_ENDPOINTS } from '../api'

const ImageUploadForm = () => { const fileInputRef = useRef(null)

const handleButtonClick = () => {
    if (fileInputRef.current) {
        fileInputRef.current.click()
    }
}

const handleImageChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files && event.target.files[0]
    if (file) {
        console.log('file input!', file)
        // ここで画像ファイルの処理を行います
        try {
            const response = await fetch(API_ENDPOINTS.IMAGE, {
                method: 'POST',
                body: file
            })
        } catch (error) {
            // エラーハンドリング
            alert()
        }
        // 画像ファイルの処理
    }

    return (
        <div>
            <div className="card-green" onClick={handleButtonClick}>
                投稿ボタン
            </div>
            <input
                type="file"
                ref={fileInputRef}
                onChange={handleImageChange}
                accept="image/*"
                style={{ display: 'none' }}
            />
        </div>
    )
}

} export default ImageUploadForm

[kazukiyoda7]

def handle_image_upload(request):
    if request.method == 'POST' and 'image' in request.FILES:
        image_file = request.FILES['image']
        image = Image.objects.create(image=image_file)
        return JsonResponse({'message': 'File uploaded successfully.'})
    else:
        return JsonResponse({'error': 'Invalid request.'})

これで受け取れる？

[kazukiyoda7]

from rest_framework.views import APIView
from rest_framework.response import Response
from .serializers import ImageSerializer

class ImageUploadView(APIView):
    def post(self, request):
        serializer = ImageSerializer(data=request.data)
        if serializer.is_valid():
            serializer.save()
            return Response({'message': 'Image uploaded successfully.'})
        else:
            return Response(serializer.errors, status=400)

これで保存できる？