Question

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

API正在通过邮递员进行工作和测试，但我总是在Ionic中收到HTTP 400 BAD请求错误。

这是我在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上为我的Django项目服务，IP地址为192.168.22.4）：

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')

在离子侧，您必须提交实际图像而不是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);
      });

Answer 2

为了检查请求中正在进行的操作：

DateDiff(StartDate, GetDate())

Answer 3

即使没有Base64，也可以使用离子原生组件进行文件传输和图像选择器，请参见：https://gist.github.com/AndreasDickow/9d5fcd2c608b4726d16dda37cc880a7b

离子2上传图片到django休息

3 个答案: