我正在使用react.js和django作为后端&我想使用axios lib从react.js表单上传图像到django

npm install axios

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

const ImageUploadForm = () => {
  const [selectedFile, setSelectedFile] = useState(null);

  const handleFileChange = (event) => {
    setSelectedFile(event.target.files[0]);
  };

  const handleFormSubmit = (event) => {
    event.preventDefault();

    const formData = new FormData();
    formData.append('image', selectedFile);

    axios.post('/api/upload', formData)
      .then((response) => {
        console.log(response.data);
      })
      .catch((error) => {
        console.error(error);
      });
  };

  return (
    <form onSubmit={handleFormSubmit}>
      <input type="file" onChange={handleFileChange} />
      <button type="submit">Upload</button>
    </form>
  );
};

export default ImageUploadForm;

from django.urls import path
from . import views

urlpatterns = [
    path('api/upload', views.upload_image),
]

from django.http import JsonResponse

def upload_image(request):
    if request.method == 'POST' and request.FILES['image']:
        image = request.FILES['image']
        # 在这里进行图像处理或保存到服务器的逻辑

        return JsonResponse({'message': 'Image uploaded successfully.'})
    else:
        return JsonResponse({'error': 'Invalid request.'})