Ionic3 learning notes (16) upload the picture to the picture bed

This is an original article. Please indicate Source

The open source Demo login and registration module made by individuals adopts Wilddog communication cloud We have to say that all aspects of the identity authentication service are very similar to the Firebase purchased by Google, which is very simple and easy to use. Among them, the User has a photoURL field to store the URL of the User's Avatar, so he looks for a free third-party drawing bed( SM.MS )To store the user's Avatar.

The Cordova plug-in used is Camera and File Transfer , which are used to take photos, select albums and upload pictures respectively. I won't go into details about the installation, import and use of Cordova plug-ins. They are all in the documents. so is the key code directly.

  getPictureAndUpload(sourceType: number) {
    const cameraOptions: CameraOptions = {
      quality: 80,
      destinationType: this.camera.DestinationType.FILE_URI,
      sourceType: sourceType,
      allowEdit: true,
      encodingType: this.camera.EncodingType.JPEG,
      targetWidth: 200,
      targetHeight: 200,
      mediaType: this.camera.MediaType.PICTURE,
      correctOrientation: true,
      saveToPhotoAlbum: true,
      cameraDirection: this.camera.Direction.BACK
    };

    this.camera.getPicture(cameraOptions).then(image => {
      this.onUploadPicture(image);
    }, error => {
      console.log(error);
    });
  }

  onUploadPicture(fileURI: string) {
    const fileTransferObject: FileTransferObject = this.fileTransfer.create();

    const fileUploadOptions: FileUploadOptions = {
      fileKey: 'file',
      fileName: 'avatar.jpg',
      httpMethod: 'POST',
      mimeType: 'image/jpeg',
      params: {},
      chunkedMode: true,
      headers: {'Content-Type': 'multipart/form-data'}
    };

    let url: string = 'https://sm.ms/api/upload?smfile=' + fileURI;

    fileTransferObject.upload(fileURI, url, fileUploadOptions).then(data => {
      console.log(data["response"]);
      wilddog.auth().onAuthStateChanged(user => {
        user.updateProfile({'photoURL': JSON.parse(data["response"])["data"]["url"]}).then(() => {
          this.getUserData();
        }, error => {
          this.presentToast(error.name + ': ' + error.message);
        });
      });
    }, error => {
      console.log(error);
    });
  }

  presentChangeAvatarActionSheet() {
      let changeAvatarActionSheet = this.actionSheetCtrl.create({
        title: 'Change the Avatar', buttons: [{
          text: 'Album', handler: () => {
            this.getPictureAndUpload(this.camera.PictureSourceType.PHOTOLIBRARY);
          }
        }, {
          text: 'Photograph', handler: () => {
            this.getPictureAndUpload(this.camera.PictureSourceType.CAMERA);
          }
        }, {text: 'cancel', role: 'cancel'}]
      });
      changeAvatarActionSheet.present().then(value => {
        return value;
      });
    }
  }

If there is anything wrong, please correct it. Thank you

Keywords: Google JSON

Added by BigBadKev on Thu, 02 Apr 2020 04:42:33 +0300