经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » Cordova » 查看文章
ionic4+angular7+cordova上传图片功能的实例代码
来源:jb51  时间:2019/6/19 13:12:23  对本文有异议

前言

ionic是一个垮平台开发框架,可通过web技术开发出多平台的应用。但只建议开发简单应用。复杂的应用需要用到许多cordova插件,而cordova插件的更新或者移动平台的更新很可能导致插件的不可用,维护升级成本较高。

安装插件

安装插件Image Picker

  1. $ ionic cordova plugin add cordova-plugin-telerik-imagepicker
  2. $ npm install @ionic-native/image-picker

安装插件File Transfer

  1. $ ionic cordova plugin add cordova-plugin-file-transfer
  2. $ npm install @ionic-native/file-transfer

添加到app.module.ts

  1. import { ImagePicker } from '@ionic-native/image-picker/ngx';
  2. import { FileTransfer} from '@ionic-native/file-transfer/ngx';

html添加控件

  <ion-button (click)="chooseImage()">上传图片</ion-button>

编辑ts文件

  1. export class UploadPage {
  2. constructor(
  3. private imagePicker: ImagePicker,
  4. private transfer: FileTransfer
  5. ) {
  6. }
  7. // 选择图片,选择完成立即上传
  8. chooseImage() {
  9. const options = {
  10. maximumImagesCount: 1
  11. // width: int,
  12. // height: int,
  13. // quality: int (0-100),
  14. // outputType: int
  15. };
  16. this.imagePicker.getPictures(options).then((results) => {
  17. for (const res of results) {
  18. this.upload(res);
  19. }
  20. }, (err) => {
  21. });
  22. }
  23. // 上传文件
  24. upload(file) {
  25. const fileTransfer: FileTransferObject = this.transfer.create();
  26. const options: FileUploadOptions = {
  27. fileKey: 'file',
  28. fileName: timestamp() + '.jpg',
  29. params: {
  30. type: 'file',
  31. action: 'upload',
  32. timestamp: timestamp(),
  33. auth_token: '79e1bd1504962034c068461d58b9cd89a1d8a4a1'
  34. },
  35. headers: {}
  36. };
  37. fileTransfer.upload(file, 'https://imgbb.com', options)
  38. .then((data) => {
  39. alert('success');
  40. })
  41. .catch((e) => {
  42. });
  43. }
  44. }

最终效果

总结

以上所述是小编给大家介绍的ionic4+angular7+cordova上传图片功能的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对w3xue网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号