首页 > 解决方案 > 我无法使用 Angular 6 将 img 上传到 DRF api

问题描述

我是 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)
}

角.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)

视图.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']

设置.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',
    ),
}

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

标签: pythondjangoangulardjango-rest-framework

解决方案


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


推荐阅读