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

2024-08-06 03:19:20

前言

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添加控件

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

编辑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上传图片功能的实例代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

angular+ionic返回上一页并刷新页面

假定当前页面为editCata页面,要返回的是cataDetail页面.目前我找到两种方法实现返回上一页并刷新,如果以后有其它方法,再继续添加. 1.在editCataCtrl.js中注入$ionicHistory服务. 使用$ionicHistory.goBack()方法即可返回到上一页面. JS端代码: $scope.goBack=function(){ $ionicHistory.goBack(); } HTML代码: <button class="button button-cle
Ionic + Angular.js实现图片轮播的方法示例

本文主要给大家介绍了关于Ionic + Angular实现图片轮播的相关资料,分享出来供大家参考学习,需要的朋友们下面来一起看看吧. 先来看看实现的效果图: 方法示例: template文件夹新建slider.html <ion-view view-title="图片轮播"> <ion-content class="padding" scroll="false"> <ion-slides class="sl
Ionic+AngularJS实现登录和注册带验证功能

登录: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <li
AngularJS ionic手势事件的使用总结

这两天学习了AngularJS手势事件感觉这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 长按 : on-hold 在屏幕同一位置按住超过500ms,将触发on-hold事件: 你可以在任何元素上使用这个指令挂接监听函数: <any on-hold="-">-</any> 示例代码: <body ng-controller="ezCtrl"> <ion-header-bar class="bar-po
ionic3+Angular4实现接口请求及本地json文件读取示例

一准备工作首先,ionic3+Angular4的开发环境你得有,这里就不赘述.环境准备好,创建一个空白项目,模板自选. 二实现过程 1 新建json文件和service service记得在app.module.ts中引用 json和service 2 json文件格式格式类似这样,根据实际需求决定. [ { "id":"1", "name":"xiehan", "age":"24&quo
ionic cordova一次上传多张图片（类似input file提交表单)的实现方法

我们可以通过cordova提供的插件调用摄像头或图库选择需要的图片上传,按cordova官方的方法,每次选择完后就直接上传,这并不符合用户的习惯,最好的用户习惯是用户选择完需要的图片,并可在本地预览,接着用户再次打开摄像头或图库再次选择图片,接着预览,对于不需要的图片删除,最后确定可以后,再一次性上传所有图片.显然这种方式,cordova是不支持,那要如何实现呢,以下是我的方法: 通过调用$cordovaImagePicker.getPictures该方法打开图库,获得图片的URL地址,ps:相
利用Ionic2 + angular4实现一个地区选择组件

前言本文主要给大家介绍的是关于利用Ionic2 + angular4实现一个地区选择组件的相关内容,为什么会有这篇文章?主要是因为最近在项目重构的过程中,发现之前用mobiscroll写的地区选择指令在angular2中很难重用(毕竟是用typeScript).于是就萌生了自己写一个组件的想法. 想和之前一样基于mobiscroll去写,但是发现非常耗费精力,于是某日万般无奈这下搜了一下相关的组件,不出所料已经有人写了.https://www.npmjs.com/package...但是此组件
ionic4+angular7+cordova上传图片功能的实例代码

前言 ionic是一个垮平台开发框架,可通过web技术开发出多平台的应用.但只建议开发简单应用.复杂的应用需要用到许多cordova插件,而cordova插件的更新或者移动平台的更新很可能导致插件的不可用,维护升级成本较高. 安装插件安装插件Image Picker $ ionic cordova plugin add cordova-plugin-telerik-imagepicker $ npm install @ionic-native/image-picker 安装插件File Tra
如何在ASP.NET Core中给上传图片功能添加水印实例代码

前言因某些原因需要在图片上添加文字水印.图片水印,所以这里做个简单的记录.下面话不多说了,来一起看看详细的实现过程吧实现方法: 在传统的.NET框架中,我们给图片添加水印有的是通过HttpModules或者是HttpHandler,然后可以通过以下代码添加水印: var image = new WebImage(imageBytes); image.AddTextWatermark( Settings.Instance.WatermarkText, "White", Setting
Angular搜索过滤批量删除添加表单验证功能集锦(实例代码)

废话不多说了,直接给大家贴代码,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .sspan{ background: #28a54c; color: #fff; margi
Angularjs添加排序查询功能的实例代码

废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="angular-1.3.0.js"></script&g
JavaScript异步上传图片文件的实例代码

html: <form action="url" enctype="multipart/form-data" id="myform" method="post"> <input accept="image/*" id="addfile" type="file" /> </form> jquery: $("#addfile&
iOS开发中Swift 指纹验证功能模块实例代码

iOS调用TouchID代码: override func viewDidLoad() { super.viewDidLoad() let context = LAContext() var error: NSError? = nil let canEvaluatePolicy = context.canEvaluatePolicy(LAPolicy.deviceOwnerAuthenticationWithBiometrics, error: &error) as Bool if error
easyui combobox开启搜索自动完成功能的实例代码

combo.json [{ "id":-1, "text":" ", "spell":"" },{ "id":1, "text":"类型1", "spell":"lx1" },{ "id":2, "text":"类型2", "spell&q
运用JSP+ajax实现分类查询功能的实例代码

本文主要是介绍了运用JSP+ajax实现分类查询功能的实例代码,分享给大家供大家参考,具体如下: 这次是对小学期关于大学毕业生信息管理系统课程设计中遇到的一些问题和解决方法进行记录和分享. 题目要求:提供企业招聘信息(本年度或历年)查询功能: 首先建立一个jsp文件用来显示数据库信息,并在上面加输入条件的文本框和查询按钮,在这个jsp文件中需要完成一个js函数在用于完成查询功能. <%@ page language="java" pageEncoding="UTF-8&
C# 日历类功能的实例代码

C# 日历类的实现代码,具体如下所示: using System; namespace DotNet.Utilities { /// <summary> /// 农历属性 /// </summary> public class CNDate { /// <summary> /// 农历年(整型) /// </summary> public int cnIntYear = 0; /// <summary> /// 农历月份(整型) /// <
Java实现FTP文件的上传和下载功能的实例代码

FTP 是File Transfer Protocol(文件传输协议)的英文简称,而中文简称为"文传协议".用于Internet上的控制文件的双向传输.同时,它也是一个应用程序(Application).基于不同的操作系统有不同的FTP应用程序,而所有这些应用程序都遵守同一种协议以传输文件.在FTP的使用当中,用户经常遇到两个概念:"下载"(Download)和"上传"(Upload)."下载"文件就是从远程主机拷贝文件至自己

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

相关推荐

随机推荐