本文为原创文章,转载请标明出处html
我的作的开源 Demo 登陆注册模块采用的是 Wilddog 野狗通信云的身份认证服务,不得不说各方面和 Google 收购的 Firebase 很像,十分简单易用。其中 User
有个 photoURL
字段是用来存放用户头像 URL 的,因此寻思着找了个免费的第三方图床(SM.MS)来存放用户头像。api
用到的 Cordova 插件是 Camera 和 File Transfer,分别用来拍照、相册选择和上传图片,Cordova 插件的安装、导入、使用我就不赘述了,文档里都有,so 直接上关键代码。ionic
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; }); } }
若有不当之处,请予指正,谢谢~this