Axios使用FormData发送图片文件（PUT请求）及DRF后端处理企业级教程

Axios使用FormData发送图片文件（PUT请求）及DRF后端处理企业级教程

一、前端Axios FormData组织与PUT请求实现

1. 创建FormData并添加数据

o 使用FormData构造函数创建对象，通过append()方法添加文本字段和图片文件。文件需从<input type="file">的files属性获取[^2][^5][^9]。

const formData = new FormData();

formData.append('title', '产品图片'); // 文本字段

formData.append('image', file); // 图片文件（file为File对象）

2. 配置Axios PUT请求

o 请求头：需手动设置Content-Type: multipart/form-data。

o 认证：企业级应用需通过请求拦截器附加JWT令牌[^6]。

import axios from 'axios';

// 创建实例并配置拦截器（企业级认证）

const api = axios.create({ baseURL: 'https://api.example.com' });

api.interceptors.request.use(config => {

config.headers.Authorization = `Bearer ${localStorage.getItem('jwt_token')}`;

return config;

});

// 发送PUT请求

api.put('/api/products/1/', formData) // 资源URL需包含主键（如/1/）

.then(response => console.log('更新成功', response.data))

.catch(error => console.error('请求失败', error));

二、DRF后端处理流程

1. 视图配置与方法定义

o 使用**ViewSet**的update方法处理PUT请求（对应全量更新），需在视图中显式配置parser_classes以支持文件解析[^6]。

from rest_framework import viewsets, parsers

from .models import Product

from .serializers import ProductSerializer

class ProductViewSet(viewsets.ModelViewSet):

queryset = Product.objects.all()

serializer_class = ProductSerializer

parser_classes = [parsers.MultiPartParser, parsers.FormParser] # 支持文件上传

# 企业级权限控制（示例）

permission_classes = [IsAuthenticated, IsOwner]

2. 序列化器处理文件字段

o 在ModelSerializer中定义ImageField或FileField，并通过request.FILES接收前端上传的图片[^6]。

from rest_framework import serializers

class ProductSerializer(serializers.ModelSerializer):

image = serializers.ImageField(required=False) # 图片字段

class Meta:

model = Product

fields = ['id', 'title', 'image']

def update(self, instance, validated_data):

# 处理图片文件（若存在）

if 'image' in validated_data:

instance.image = validated_data['image']

instance.title = validated_data.get('title', instance.title)

instance.save()

return instance

3. 请求数据解析

o DRF通过MultiPartParser解析multipart/form-data格式请求：

§ 文本数据（如title）存储于request.data[^6]；

§ 图片文件存储于request.FILES，可通过serializer.save()自动关联至模型实例[^6]。

三、企业级关键实践

1. 前端优化

o 文件验证：限制图片格式（如.jpg/.png）和大小（如≤2MB），通过File.type和File.size判断[^3][^7]。

o 进度提示：使用Axios的onUploadProgress监听上传进度，提升用户体验[^3]。

2. 后端安全与性能

o 文件存储：对接对象存储（如腾讯云COS），避免服务器本地存储压力[^3]。

o 权限控制：通过permission_classes限制仅资源所有者可更新，结合JWT令牌验证身份[^6]。

o 错误处理：捕获文件上传异常（如格式错误、大小超限），返回标准化错误响应（如HTTP 400）[^4]。

四、完整请求/响应示例

• 前端请求（Axios）：

const file = document.querySelector('input[type="file"]').files[0];

const formData = new FormData();

formData.append('title', '更新产品图');

formData.append('image', file);

api.put('/api/products/1/', formData)

.then(res => console.log('更新成功', res.data))

.catch(err => console.error('错误', err.response.data));

• 后端响应（DRF）：

{

"id": 1,

"title": "更新产品图",

"image": "https://example.com/media/products/updated.jpg"

}

核心引用：FormData构造与append[^2][^5][^9]、DRF解析器配置[^6]、企业级认证[^6]、文件字段处理[^6]、Content-Type自动设置[^8]、对象存储集成[^3]。