我正试图使用ajax将图像从前端发送到使用django-rest框架的后端，但没有结果。
响应误差为：CCD_ 1，其中不是"0"；image/png"；我尝试了很多不同的类型。(我发送的img是png(
HTML:
<input type="file" name="" id="profilepic" enctype="multipart/form-data" accept="image/*">
<label id="uploadBtn" for="profilepic">Choose your profile photo</label>
JS:
请注意，首先我将所有嵌套数据作为JSON发送，但后来我进行了拆分以发送img separeted。
var my_data = { "user_url": user_url, "user": username, "atoms": [atom_dict] };
$.ajax({
url: origin + '/boonds_api' + userurl,
type: 'PUT',
contentType: "application/json",
data: JSON.stringify(my_data),
success: function (result) {
console.log(my_data);
}
});
// Until here everything is fine sebding data to backend
// Only img
my_img = $('#profilepic')[0].files[0]
var my_data = {"atoms": {"img":my_img}};
$.ajax({
url: origin + '/boonds_api' + userurl,
type: 'PUT',
contentType: "image/png",
data: JSON.stringify(my_data),
success: function (result) {
console.log(my_data);
}
});
DJANGO
型号.py
class Atom(models.Model):
name = models.CharField(max_length=128,blank=True)
bio = models.TextField()
img = models.ImageField(null=True, blank=True, upload_to='users_app')
user_account = models.ForeignKey(UserAccount, on_delete=models.CASCADE, null=True, blank=True, related_name="atoms")
def __str__(self):
return self.name
views.py
class UserAccountViewSet(viewsets.ModelViewSet):
queryset = UserAccount.objects.all()
serializer_class = UserAccountSerializer
lookup_field = "user_url"
permission_classes = [IsOwnerOrReadOnly]
def update(self, request, *args, **kwargs): # update = PUT
partial = kwargs.pop('partial', False)
instance = self.get_object()
serializer = self.get_serializer(
instance, data=request.data, partial=partial)
serializer.is_valid(raise_exception=True)
self.perform_update(serializer)
return Response(serializer.data)
串行器.py
我也尝试了不同的解决方案来接受图像，但不确定错误是在这里，在模型中还是在ajax中。
from drf_writable_nested import WritableNestedModelSerializer # Enable write nested
from .models import *
from drf_base64.fields import Base64ImageField
class AtomSerializer(serializers.HyperlinkedModelSerializer, WritableNestedModelSerializer):
boonds = BoondSerializer(many=True,required=False)
img = Base64ImageField(max_length=None, use_url=True, required=False)
class Meta:
model = Atom
fields = ["name","bio", "img", "boonds"]
我解决了这个问题，避免了使用drf(序列化程序(，只创建了一个带有更新视图(UpdateView(的新ednpoint:
class yourImageView(UpdateView):
model = YourModel
def post(self, request, *args, **kwargs):
img = self.request.FILES["my_img"]
YourModel.img = img
YourModel.save()
Ajax：
var form = new FormData();
form.append('my_img', my_img);
$.ajax({
type: 'POST',
url: origin + '/new_endpoint/' + userdata.user_id + "/",
data: form,
contentType: false,
processData: false
})