我无法使用 Angular 6 将图像上传到 DRF api

Question

我是 DRF 新手，我构建了一个简单的 api 依赖于官方文档 evrything 效果很好，但是当我想上传 img 文件时 request.data 为空

request.data = ---->  <QueryDict: {}>

如果有人可以帮忙

角度.service.ts

const httpOptions_multipart = {
  headers: new HttpHeaders({
    'Content-Type':  'multipart/form-data',
    'Authorization': 'Token 28----------------------8d01ab33e1df'
   })
};

UploadImage(img):Observable<Image> {    
  console.log(img);
  return this.http.put<Image>(this.profileUrl, img, httpOptions_multipart)
}

Angular .component.ts

    fileToUpload: File = null;

    handleFileInput(files: FileList) {

    this.fileToUpload = files.item(0);
    console.log('get item ');
    var reader = new FileReader();
    reader.onload = (event:any){
      this.imgUrl = event.target.result;
    }
    reader.readAsDataURL(this.fileToUpload)
    }

    uploadFileToActivity(){
    this.productservice.UploadImage(this.fileToUpload).subscribe(data =>{
     console.log(data);
    }, error => {
        console.log(error);
          });
    }

django rest框架model.py

class Profile(models.Model):
    name = models.CharField(max_length=200)
    bio = models.TextField(blank=True)

    pic = models.ImageField(upload_to='pics', blank=True)

    updated_at = models.DateTimeField(auto_now=True)
    created_at = models.DateTimeField(auto_now_add=True)

views.py

class ProfileViewSet(viewsets.ModelViewSet):
    serializer_class = ProfileSerializer
    queryset = Profile.objects.all()

    @decorators.action(
       detail=True,
       methods=['PUT'],
       serializer_class=ProfilePicSerializer,
       parser_classes=(MultiPartParser,)
    )
    def pic(self, request, pk):
        print ('request.data = ----> ',request.data)
        obj = self.get_object()
        print(obj)
        serializer = self.serializer_class(obj, data=request.data,
                                       partial=True)

        if serializer.is_valid():
            serializer.save()
            return response.Response(serializer.data)
        return response.Response(serializer.errors,
                                 status.HTTP_400_BAD_REQUEST)

序列化器.py

class ProfileSerializer(serializers.ModelSerializer):
    class Meta:
        model = Profile
        fields = ['name', 'bio', 'pic']
        read_only_fields = ['pic']


class ProfilePicSerializer(serializers.ModelSerializer):
    class Meta:
        model = Profile
        fields = ['pic']

settings.py

REST_FRAMEWORK = {
    'DEFAULT_FILTER_BACKENDS': ('django_filters.rest_framework.DjangoFilterBackend',),
    'DEFAULT_RENDERER_CLASSES': (
        'rest_framework.renderers.JSONRenderer',
        'rest_framework.renderers.BrowsableAPIRenderer',
    ),
    'DEFAULT_PARSER_CLASSES': (
        # 'rest_framework.parsers.JSONParser',
        # 'rest_framework.parsers.FileUploadParser',
        # 'rest_framework.parsers.FormParser',
        'rest_framework.parsers.MultiPartParser',

    ),

    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework.authentication.TokenAuthentication',
    ),
    'DEFAULT_PERMISSION_CLASSES': (
        'rest_framework.permissions.AllowAny',
    ),
}

或者如果有其他方法比 我只需要任何方式上传图片 我是编程新手谢谢

Answer 1

问题是 put 方法不支持 angular 6 中的多部分表单数据。使用 post 方法而不是 put 将解决您的问题。