React前端上传图片通过Imgur API提交至Python Django后端问题求助

1. 前端请求侧调整 #

• 提交图片时必须使用FormData对象封装文件，不能直接传JSON格式的请求体
• 不要手动设置Content-Type: multipart/form-data请求头，由浏览器自动生成（会自动带上正确的boundary分隔符，手动设置容易出错）
• 确认组件内拿到的是原生File对象，比如从type为file的input的onChange事件中取e.target.files[0]再传入请求方法

uploadActions请求代码参考：

// 示例基于axios，其他请求库逻辑同理
export const uploadImage = (imageFile) => {
  const formData = new FormData()
  // 这里的字段名`image`要和后端取值的字段名完全对应
  formData.append('image', imageFile)
  return axios.post('/api/upload/', formData)
}

2. Django后端视图调整 #

• 上传的文件只能从request.FILES中获取，不要从request.body或者request.POST里取
• 替换原来的upload_from_path方法，改用imgurpython提供的upload_from_file方法直接处理内存中的文件对象，不需要把文件存到本地磁盘

普通Django视图参考代码：

from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
from imgurpython import ImgurClient

# 测试阶段可加csrf_exempt避免CSRF校验拦截，生产环境建议前端携带正确CSRF Token
@csrf_exempt
def upload_image(request):
    if request.method != 'POST':
        return JsonResponse({'code': 400, 'msg': '仅支持POST请求'}, status=400)
    # 这里的`image`要和前端FormData里的字段名完全一致
    image_file = request.FILES.get('image')
    if not image_file:
        return JsonResponse({'code': 400, 'msg': '未获取到上传的图片文件'}, status=400)
    
    # 替换为你自己的client_id、client_secret、refresh_token
    client = ImgurClient('你的client_id', '你的client_secret', '你的refresh_token')
    config = {'album': '你的相册id（可选）'}
    # 直接传文件对象即可
    image = client.upload_from_file(image_file, config=config, anon=False)
    # 返回图片url给前端
    return JsonResponse({'code': 200, 'url': image['link']})

如果你使用Django REST Framework编写视图，需要额外指定解析器：

from rest_framework.parsers import MultiPartParser, FormParser
from rest_framework.views import APIView
from rest_framework.response import Response
from imgurpython import ImgurClient

class UploadImageView(APIView):
    parser_classes = (MultiPartParser, FormParser)
    def post(self, request):
        image_file = request.FILES.get('image')
        if not image_file:
            return Response({'code': 400, 'msg': '未获取到上传的图片文件'}, status=400)
        # 后续上传Imgur逻辑同上
        client = ImgurClient('你的client_id', '你的client_secret', '你的refresh_token')
        config = {'album': '你的相册id（可选）'}
        image = client.upload_from_file(image_file, config=config, anon=False)
        return Response({'code': 200, 'url': image['link']})

3. 可选配置检查 #

如果上传的图片超过2.5M，可在Django settings中调整内存上传上限，超出的文件会自动存到临时磁盘，不影响upload_from_file方法使用：

# settings.py 示例：设置最大内存上传大小为10M
FILE_UPLOAD_MAX_MEMORY_SIZE = 10 * 1024 * 1024

内容的提问来源于stack exchange，提问作者xuunnis1011