ionic2拍照和文件上传

最新推荐文章于 2021-12-09 14:47:16 发布

佳亮

最新推荐文章于 2021-12-09 14:47:16 发布

阅读量1.3w

点赞数 2

分类专栏：其他文章标签： ionic2 camera 表单 Transfer

本文链接：https://blog.youkuaiyun.com/zahngjialiang/article/details/54632514

版权

本文档介绍了如何在Ionic2中实现拍照、从相册选择图片和视频上传到服务器的功能。通过使用cordova-plugin-camera和cordova-plugin-file-transfer插件，详细讲解了界面搭建、插件安装、TypeScript代码实现等步骤，提供了源码供参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一月之前，我都不知道ionic为何物。突然公司项目主管让我看看ionic，刚开始听到这个消息，非常高兴，终于不用死守一门技术了。结果鼓捣了一段时间，也就是搭建了个环境而已，demo的代码几乎一句都看不懂，在网上东抄抄，西抄抄，也就写了一个界面。这样肯定是不能满足公司的需求的。过了几天，项目主管直接让我用ionic2做一个demo进行演示，下面就是这个小demo。
写这篇博客的目的，一方面相当于自己的笔记，做个小总结，另一方面如果有需要实现该功能的，如果找不到更好的答案，可以看看这个。

1，需要实现的功能

简单的界面搭建
拍照，并上传到指定服务器
从相册选择图片并上传到指定的服务器
选择视频并上传

2，搭建界面

效果图：

界面很简单，三个按钮，几个input表单，一张图片，一个提交的按钮。
因为我连基本得HTML都不怎么懂，所以搭建这个界面也废了一番力气。
下面是界面的代码：


<ion-header class="action-sheets-basic-page">
  <ion-navbar>
    <ion-title>铁路应急图像系统</ion-title>
  </ion-navbar>

</ion-header>

<ion-content padding class="action-sheets-basic-page">
  <button ion-button style=" width: 31%;padding: 0px"  (click)="takePhoto()">
    拍照
  </button>
  <button ion-button style="width: 31%;padding: 0px" (click)="choosePhoto()">
    选择照片
  </button>
  <button ion-button  style="width: 31%;padding: 0px" (click)="chooseVideo()">
    选择视频
  </button>


    <form [formGroup]="loginForm" (ngSubmit)="login(loginForm.value)" novalidate>
        <ion-item [class.error]="!tieluxian.valid && tieluxian.touched">
            <ion-label>铁路线：</ion-label>
            <ion-input type="text"  value="" [formControl]="tieluxian" clearInput=true>

最低0.47元/天解锁文章