0

我试图将图像从我的前端（React）上传到 Django，但我收到错误，错误请求，可能是因为序列化程序不接受图像数据。

这是数据到达后端的方式 <QueryDict: {'id': ['1'], 'image': ['[object Object]']}>

这是我的看法。

class ProfilePictureView(APIView):

    parser_classes = [MultiPartParser, FormParser]
    
    def post(self, request):
        print(request.data)
        ipdb.set_trace()
        serializer = ProfilePictureSerializers(data=request.data)
        if serializer.is_valid():
            try:
                picture = User.objects.get(id=request.data['id'])
                picture.image = request.data['image']
                picture.save()
                serializer = ProfilePictureSerializers(picture)
                return Response(serializer.data, status=status.HTTP_200_OK)
            except:
                return Response({"Detail": "Not found"}, status=status.HTTP_404_NOT_FOUND)
        else:
            return Response(status=status.HTTP_400_BAD_REQUEST)

这是我的模型。

def upload_to(instance, filename):
    return 'media/{filename}'.format(filename=filename)

class User(AbstractUser):
    image = models.ImageField(_("Image"),null=True, blank=True, upload_to=upload_to, default='media/default.png')

序列化器。

class ProfilePictureSerializers(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = ('id', 'image')

还有我在前端的申请。


const config = {headers: {'content-type': 'multipart/form-data'}};

export const ProfilePictureThank = (UserData, setError) => (dispatch) => {
  let formData = new FormData();
  formData.append("id", UserData.id)
  formData.append("image", UserData.image)

  axios
    .post(
      `${url_local}/api/profile/picture/`, formData, config)
    .then((info) => {
      dispatch(postUserProfilePicture(info.data));
    })
    .catch((error) => {
      setError(true);
      dispatch(postUserProfilePicture(error));
    });
};

这里是个人资料应用程序。

   const UserData = {
        id: userId,
        image: photo
    }
    const changeImage = async (e) => {
        setPhoto({image: e.target.files})
        dispatch(await ProfilePictureThank( UserData, setError));
        
      };

    <section className="profile-picture-container">
           <div className="profile-picture-item">
           <img className="profile-photo" src={photo}  />;
           <label for="upload" className="change-photo-button" >
               Trocar Imagem
           <input name="image" encType="multipart/form-data" type="file" id="upload" onChange={changeImage} />
           </label>
           </div>
           <div className="profile-picture-item">
            Bem vindo, {name}
           </div>
       </section>

如果我从视图中删除 serializer.is_valid()，我会得到状态 200，但是图像不会保存。

我尝试了许多我在这里找到的堆栈溢出解决方案，但它们都不适用于我的情况。

如果有人可以帮助我，我将不胜感激。

4

0 回答 0