Ionic3学习笔记（十六）上传头像至图床

本文为原创文章，转载请标明出处

个人做的开源 Demo 登录注册模块采用的是 Wilddog 野狗通讯云的身份认证服务，不得不说各方面和 Google 收购的 Firebase 很像，十分简单易用。其中 User 有个 photoURL 字段是用来存放用户头像 URL 的，所以寻思着找了个免费的第三方图床（SM.MS）来存放用户头像。

用到的 Cordova 插件是 Camera 和 File Transfer，分别用来拍照、相册选择和上传图片，Cordova 插件的安装、导入、使用我就不赘述了，文档里都有，so 直接上关键代码。

  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: ‘更换头像‘, buttons: [{
          text: ‘相册‘, handler: () => {
            this.getPictureAndUpload(this.camera.PictureSourceType.PHOTOLIBRARY);
          }
        }, {
          text: ‘拍照‘, handler: () => {
            this.getPictureAndUpload(this.camera.PictureSourceType.CAMERA);
          }
        }, {text: ‘取消‘, role: ‘cancel‘}]
      });
      changeAvatarActionSheet.present().then(value => {
        return value;
      });
    }
  }

如有不当之处，请予指正，谢谢～