在Django中接收前端Vue传输的formData中的图片数据，通常是通过Django的视图（Views）和表单（Forms）来实现的。下面是一个基本的示例，说明了如何在Django后端处理由Vue前端发送的formData图片。
前端Vue代码示例：
假设你有一个Vue组件，其中包含一个表单，用户可以通过这个表单上传图片：
<template> <div> <form @submit.prevent="submitForm"> <input type="file" @change="onFileChange" /> <button type="submit">上传图片</button> </form> </div> </template> <script> export default { data() { return { file: null, }; }, methods: { onFileChange(e) { this.file = e.target.files[0]; }, async submitForm() { if (!this.file) { alert('请选择一个文件。'); return; } const formData = new FormData(); formData.append('image', this.file); try { const response = await this.$http.post('/upload/', formData, { headers: { 'Content-Type': 'multipart/form-data', }, }); console.log('Image uploaded:', response.data); } catch (error) { console.error('上传失败:', error); } }, }, }; </script>
后端Django代码示例：
在Django后端，你需要创建一个视图来处理图片上传：
from django.http import JsonResponse from django.views.decorators.csrf import csrf_exempt from django.core.files.storage import default_storage from django.core.files.base import ContentFile @csrf_exempt # 如果你不使用Django的CSRF令牌，则可以暂时禁用CSRF保护 def upload_image(request): if request.method == 'POST' and request.FILES['image']: image = request.FILES['image'] image_name = default_storage.save(image.name, ContentFile(image.read())) image_url = default_storage.url(image_name) return JsonResponse({'message': '图片上传成功', 'url': image_url}) return JsonResponse({'error': '无法上传图片'}, status=400)
在urls.py中，你需要为这个视图添加一个URL路径：
from django.urls import path from .views import upload_image urlpatterns = [ # ... 其他URL配置 ... path('upload/', upload_image, name='upload_image'), ]
