Next.js 13中使用FileReader转换图片为表单数据格式遇问题

你原来用FileReader转DataURL的方式完全没必要，Django DRF接收文件最直接高效的方式是用FormData格式，直接把文件对象塞进FormData里发送就行，不用转base64。下面是正确的实现步骤和代码：

核心思路 #

利用浏览器原生的FormData API，将用户选择的文件对象添加到FormData实例中，然后以multipart/form-data格式发送POST请求——这是DRF原生支持的文件上传格式，无需额外处理。

完整代码示例 #

1. 客户端组件中的上传逻辑（Next.js 13） #

// 处理图片上传的异步函数
async function uploadImage(imageFile) {
  // 先确认拿到的是有效的File对象（通常从input的files数组取第一个）
  const file = imageFile;
  if (!file) return;

  // 创建FormData实例
  const formData = new FormData();
  // 这里的键名必须和Django DRF序列化器里的文件字段名完全一致，比如后端字段叫"avatar"就写"avatar"
  formData.append('image', file);

  try {
    const response = await fetch('http://你的DjangoAPI地址/upload/', {
      method: 'POST',
      body: formData,
      // 无需手动设置Content-Type，浏览器会自动生成带边界的multipart/form-data头
      // 如果后端需要认证，可在此添加Authorization头，比如：
      // headers: {
      //   'Authorization': `Token ${你的用户token}`
      // }
    });

    if (!response.ok) {
      throw new Error(`请求失败：${response.status}`);
    }

    const resData = await response.json();
    console.log('上传成功', resData);
    return resData;
  } catch (err) {
    console.error('上传出错:', err);
  }
}

// 绑定到input的change事件，获取用户选择的文件
function handleImageSelect(event) {
  const selectedFile = event.target.files[0];
  uploadImage(selectedFile);
}

2. 对应的客户端组件JSX #

<input type="file" accept="image/*" onChange={handleImageSelect} />

你原有代码的问题 #

用FileReader.readAsDataURL()会把图片转成base64字符串，这种方式不仅让数据体积增大30%左右，还需要DRF额外处理base64格式的内容，完全是多此一举，不如直接传递原生文件对象高效。

后端配置注意事项 #

确保Django这边的配置匹配：

• 序列化器中的文件字段使用ImageField()或FileField()，示例：

  from rest_framework import serializers
  from .models import YourModel
  
  class YourModelSerializer(serializers.ModelSerializer):
      class Meta:
          model = YourModel
          fields = ['image'] # 和前端FormData的键名保持一致
  

• 自定义视图类需包含MultiPartParser和FormParser（DRF的ModelViewSet默认已包含，无需额外添加）：

  from rest_framework.parsers import MultiPartParser, FormParser
  from rest_framework.viewsets import ModelViewSet
  
  class YourModelViewSet(ModelViewSet):
      parser_classes = [MultiPartParser, FormParser]
      # ...其他配置
  

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