Question

我正在使用离子本机插件通过s3签名的URL上传图像。相机插件会生成base64格式的图像，因此我无法以正确的格式上传

takePhoto() {
    const options: CameraOptions = {
        quality: 50,
        destinationType: this.camera.DestinationType.DATA_URL,
        encodingType: this.camera.EncodingType.JPEG,
        mediaType: this.camera.MediaType.PICTURE,
        correctOrientation: true,
        sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
    };

    this.camera.getPicture(options).then((imageData) => {
        this.img = 'data:image/jpeg;base64,' + imageData;
        this.uploadProfile();
    }, (err) => {
        console.log(err);
    });
}

uploadProfile() {
    const phone = localStorage.getItem('phone');
    const imageName = phone + '.jpg';
    this.profileService.getPresignedUrl(imageName).subscribe(res => {
        console.log(res.urls[0]);
        this.profileService.uploadProfile(res.urls[0], this.img).subscribe(data => {
            console.log('Successfully Uploaded');
        });
    });
}

我正在尝试这些方法，但是以文本格式存储

Answer 1

为时已晚，但是为了以防万一，我将在这里回答。使用FILE_URI作为您的camera.DestinationType。然后使用XMLHttpRequest将FILE_URI转换为blob。

takePhoto() {
    const options: CameraOptions = {
        quality: 50,
        destinationType: this.camera.DestinationType.FILE_URI,
        encodingType: this.camera.EncodingType.JPEG,
        mediaType: this.camera.MediaType.PICTURE,
        correctOrientation: true,
        sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
    };

    this.camera.getPicture(options).then((imageData) => {
        this.imageDataToBlob(imageData)
        this.uploadProfile();
    }, (err) => {
        console.log(err);
    });
}

imageData到Blob

imageDataToBlob(imageData) {
  let xhr = new XMLHttpRequest();
  xhr.open('GET', imageData);
  xhr.responseType = 'blob';
  xhr.onload = () => {
    let blobImage = xhr.response;
  }
  xhr.send();
}

希望这会有所帮助。

如何使用Ionic 4中的签名URL和离子相机插件在s3中上传图像

1 个答案: