django - ionic 2上传图片到django rest

Question

我正在尝试通过 Django Rest API 将图像从 Ionic 2 应用程序上传到 Django 支持的网站。

API 正在运行并通过 Postman 进行了测试，但我总是在 Ionic 中收到 HTTP 400 BAD Request 错误。

这是我在 Ionic 中的代码:

openCamera(){
    var options = {
      sourceType: Camera.PictureSourceType.CAMERA,
      destinationType: Camera.DestinationType.DATA_URL
    };
    Camera.getPicture(options).then((imageData) => {
      this.imageName = imageData;
      this.imageURL = 'data:image/jpeg;base64,' + imageData;
    }, (err) => {
      this.showAlert(err);
    });
  } 

上传文件(我在本地 PC 上使用 IP 地址 192.168.22.4 服务我的 Django 项目):

transferData(auth){
      let headers = new Headers();
      headers.append('Authorization', auth);

      let formData = new FormData();
      formData.append('image', this.imageURL, this.imageName);

      this.http.post("http://192.168.22.4/api-imageUpload", formData, {headers: headers}).subscribe(res => {
        let status = res['status'];
        if(status == 200){
          this.showAlert( "The image was successfully uploaded!");
        }else{
          this.showAlert("upload error");
        }

      }, (err) => {
        var message = "Error in uploading file " + err
        this.showAlert(message);
      });  
  }

在 Django 上，这是我的序列化程序:

class ImageDetailsSerializer(serializers.ModelSerializer):
    image = serializers.ImageField(max_length=None, use_url=True)
    class Meta:
        model = ImageDetails
        fields= ('image','status','category', 'user')   ####status, category has default value

和 views.py:

class ImageDetailsViewSet(generics.ListCreateAPIView):
    queryset = ImageDetails.objects.all()
    serializer_class = ImageDetailsSerializer

我不确定我上传文件的代码是否正确。我正在尝试通过表单数据传递数据，因为该表单在我的 API 中运行良好。这种方法是否正确？是否有任何其他方法来完成这项工作？

注意:我尝试使用 Transfer Cordova 插件，但它不起作用。

Answer 1

我终于解决了这个问题。 HTTP 400 表示代码某处存在语法错误，这是上传照片中使用的编码。移动数据使用base64编码。发送请求时，文件将被转换为 Unicode 字符串。

另一方面，Django-Rest 对图像使用普通编码，因此默认情况下不支持 base64 图像。但幸运的是，这个插件已经在 GitHub 上可用了。 .

您只需要安装插件并将其导入到您的 serializers.py 中:

from drf_extra_fields.fields import Base64ImageField
class ImageDetailsSerializer(serializers.ModelSerializer):
    image = Base64ImageField()  
    class Meta:
        model = ImageDetails
        fields= ('image','status','category', 'user')

在 Ionic 端，您必须提交实际图像而不是 imageURL。就我而言，我只需将代码调整为:

transferData(auth){

      let headers = new Headers();
      headers.append('Authorization', auth);

      let formData = new FormData();
      formData.append('category', 1);
      formData.append('status', 'Y')
      formData.append('image', this.imageName); 

      this.http.post("http://192.168.22.4/api-imageUpload", formData, {headers: headers}).subscribe(res => {
        let status = res['status'];
        if(status == 201){
          var message = "The image was successfully uploaded!";
          this.showAlert(message);
        }else{
          var message = "upload error";
          this.showAlert(message);
        }

      }, (err) => {
        var message = "Error in uploading file " + err;
        this.showAlert(message);
      });