如何在Vue中实现文件上传？搭配Django后端的技术问询

前端Vue代码修正 #

现有代码的核心问题是未正确获取文件对象，也未使用FormData处理文件上传逻辑。以下是修正后的完整代码：

模板部分 #

<template>
  <div class="tasks_container">
    <div class="create_data">
      <form @submit.prevent="createData">
        <div class="form-group">
          <label for="name">Name</label>
          <input id="name" v-model="name" type="text" class="form-control" />
        </div>
        <div class="form-group">
          <label for="image">Image</label>
          <input ref="picInput" type="file" accept="image/*" class="form-control" />
        </div>
        <div class="form-group">
          <button type="submit">Create Data</button>
        </div>
      </form>
    </div>
  </div>
</template>

脚本部分 #

<script>
export default {
  data() {
    return {
      students: [],
      name: '',
    }
  },
  methods: {
    async createData() {
      try {
        // 获取文件输入框中的文件对象
        const fileInput = this.$refs.picInput;
        if (!fileInput.files.length) {
          console.error('请先选择图片');
          return;
        }
        const picFile = fileInput.files[0];

        // 创建FormData对象，用于封装表单数据和文件
        const formData = new FormData();
        formData.append('name', this.name);
        formData.append('pic', picFile);
        formData.append('completed', false);

        // 发送POST请求，axios会自动识别FormData并设置正确的请求头
        const response = await this.$http.post('http://localhost:8000/create/', formData);

        // 更新数据并重置表单
        this.students.push(response.data);
        this.name = '';
        fileInput.value = ''; // 重置文件输入框状态
      } catch (error) {
        console.error('上传失败:', error);
      }
    },
  },
}
</script>

后端Django关键配置 #

1. 模型定义 #

from django.db import models

class Student(models.Model):
    name = models.CharField(max_length=100)
    pic = models.ImageField(upload_to='students/')  # 指定文件存储的子路径
    completed = models.BooleanField(default=False)

2. 媒体文件配置（settings.py） #

MEDIA_ROOT = BASE_DIR / 'media'  # 本地文件存储根目录
MEDIA_URL = '/media/'  # 前端访问文件的URL前缀

3. 视图处理（Django REST Framework示例） #

from rest_framework import viewsets
from .models import Student
from .serializers import StudentSerializer

class StudentViewSet(viewsets.ModelViewSet):
    queryset = Student.objects.all()
    serializer_class = StudentSerializer

    def create(self, request, *args, **kwargs):
        # DRF会自动解析FormData中的文件数据，无需额外处理
        return super().create(request, *args, **kwargs)

4. 序列化器配置（serializers.py） #

from rest_framework import serializers
from .models import Student

class StudentSerializer(serializers.ModelSerializer):
    class Meta:
        model = Student
        fields = ['id', 'name', 'pic', 'completed']
        extra_kwargs = {
            'pic': {'write_only': False}  # 允许返回文件的访问URL
        }

5. URL配置（urls.py） #

from django.conf import settings
from django.conf.urls.static import static
from django.urls import path
from .views import StudentViewSet

urlpatterns = [
    path('create/', StudentViewSet.as_view({'post': 'create'}), name='create-student'),
]

# 开发环境下配置媒体文件的访问路由
if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

注意事项 #

• 安装图片处理依赖：pip install pillow
• 生产环境请勿使用static函数处理媒体文件，建议用Nginx反向代理或云存储服务
• 可在settings.py中配置FILE_UPLOAD_MAX_MEMORY_SIZE限制上传文件大小

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