python - 我无法使用 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',
),
}
或者如果有其他方法比我只需要任何方法来上传图像我是编程新手谢谢
解决方案
问题是 put 方法不支持 angular 6 中的多部分表单数据。使用 post 方法而不是 put 将解决您的问题。
推荐阅读
- maven - 如何将我的 Maven Jenkins 作业配置为仅构建已签入代码的模块?
- javascript - 我如何等到所有请求都完成?
- python - 将变量存储为另一个变量的属性是一种好习惯吗?
- c++ - 如何在年龄计算器中修复闰年逻辑并找到年龄?
- javascript - 用 3 个按钮构建一个带有图像的小页面
- python - 池未使用全部处理器容量
- php - 如何将数据从 python 程序发送到 php 以将数据存储在在线数据库中?
- sql - Oracle:用另一个字符串的项目替换字符串中的项目的SQL
- javascript - 加载资源失败:服务器响应状态为 404 (Not Found) javascript/application.js
- javascript - DynamoDB 无法按范围键获取项目?