ionic4+angular7+cordova上传图片功能的实例代码

前端  /  管理员 发布于 4年前   287

前言

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

安装插件

安装插件Image Picker

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

安装插件File Transfer

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

添加到app.module.ts

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

html添加控件

  上传图片

编辑ts文件

export class UploadPage {  constructor(    private imagePicker: ImagePicker,    private transfer: FileTransfer  ) {  }  // 选择图片，选择完成立即上传  chooseImage() {    const options = {      maximumImagesCount: 1      // width: int,      // height: int,      // quality: int (0-100),      // outputType: int    };    this.imagePicker.getPictures(options).then((results) => {      for (const res of results) {        this.upload(res);      }    }, (err) => {    });  }  // 上传文件  upload(file) {    const fileTransfer: FileTransferObject = this.transfer.create();    const options: FileUploadOptions = {      fileKey: 'file',      fileName: timestamp() + '.jpg',      params: {        type: 'file',        action: 'upload',        timestamp: timestamp(),        auth_token: '79e1bd1504962034c068461d58b9cd89a1d8a4a1'      },      headers: {}    };    fileTransfer.upload(file, 'https://imgbb.com', options)      .then((data) => {        alert('success');      })      .catch((e) => {      });  }}

最终效果

总结

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

您可能感兴趣的文章:

• ionic3+Angular4实现接口请求及本地json文件读取示例
• AngularJS ionic手势事件的使用总结
• angular+ionic返回上一页并刷新页面
• 利用Ionic2 + angular4实现一个地区选择组件
• Ionic + Angular.js实现图片轮播的方法示例
• Ionic+AngularJS实现登录和注册带验证功能
• ionic cordova一次上传多张图片（类似input file提交表单)的实现方法