Ionic3/4中如何上传图片（拍照/图片选择）

最新推荐文章于 2019-12-23 00:02:34 发布
最新推荐文章于 2019-12-23 00:02:34 发布
阅读量3.3k 收藏 3
点赞数
分类专栏： Ionic4 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ForgivenCheney/article/details/95631152
版权
本文详细介绍了在Ionic3/4应用中如何实现拍照和选择图片上传，包括前置条件、实现思路、逻辑及代码示例。讨论了iOS与Android的权限差异，强调了图片上传过程中对用户反馈的重要性。同时，提醒开发者注意图片上传与文件上传的区别，以避免混淆不同的API。
摘要由CSDN通过智能技术生成

[Talk is cheap. Show me the code]

不想看理论知识请直接移步最后代码示例。

(本文还是建议看下整体思路)

最初我写APP的时候使用 了Ionic3，今天去看了下文档，Ionic4相对于3的文档说明更清晰，代码也更加简化，社区变得越来越好还真是有点小开心呢。但也有批评说Ionic4相对于3更复杂，坑更多。

手机端图片上传有两种方式一种是 拍照上传 另一种是 图片选择 （请注意这里与文件选择的区别） 之后上传，废话不多说进入正题。

拍照上传：

一、前置条件

1.1、引入js和本地依赖，这样我们就可以使用camera的一些api

npm install --save @ionic-native/cameranpm install --save @ionic-native/camera

1.2添加cordova插件

ionic cordova plugin add cordova-plugin-camera

然后在config.xml中会生成，有时需要你自己添加进去

<plugin name="cordova-plugin-camera" spec="^4.0.3" />

相对android，ios对于权限的控制要更严格一些，ios10以下需要你在config.xml底

最低0.47元/天 解锁文章
TheDesiderata
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
ionic选择多张图片上传的示例代码
11-27
在上一篇博客ionic本地相册、拍照、裁剪、上传（单图完全版） 中，跟大家分享了ionic项目选择本地图片、拍照、裁剪、上传到服务器的内容，但是上一节的内容由于使用了Cordova的Camera插件进行了图片选择与拍摄，所以...
使用 ionic + cordova + vue3 实现相册选择、拍照，并上传、预览图片
最新发布
Lyrelion的博客
10-26 2013
使用 ionic + cordova + vue3 实现相册选择、拍照，并上传、预览图片
ionic list item 图片文字展示 （实用）
chelen_jak的专栏
09-28 1050
原文出处：https://blog.csdn.net/hbiao68/article/details/52683339# 显示小图片 &lt;ul class="list"&gt; &lt;li class="item item-avatar"&gt; &lt;img src="public/img/appliance_wash.png" c...
[Ionic]上传图片
那么多的人，你要去哪里
06-06 1449
前言由于项目中涉及到用户上传修改头像，所以研究一下Ionic中上传图片的实现。正文由于代码中注释很详细，直接贴代码和注释HTML代码：&lt;!-- 下拉刷新加载 --&gt; &lt;ion-content no-margin&gt; &lt;ion-refresher (ionRefresh)="pullDown($event)"&gt; &lt;ion-refresher-con...
IONIC3 图片（文件）上传
子逊的心酸史
03-29 1501
ts: 1.app.modules.ts 根组件注册 import { ImagePicker } from "@ionic-native/image-picker"; import { Camera } from '@ionic-native/camera'; import { FileTransfer, FileTransferObject } from "@ionic-native/f...
ionic3 上传图片 视频 (包括拍照上传和从手机相册选择上传)
Right.W
12-23 1116
初学ionic3 ,下面是在实际应用中上传图片和视频,样式和效果虽然有待改善,但是功能上已经实现图片上传和视频上传,所以发个博客备用看,肯定有很多不足,望指正. ionic3 使用上传图片、视频,需要下载插件来支持功能的实现,然后才可以在ts中引用、定义 相机插件: ionic pluginaddcordova-plugin-camera 上传文件插件: ionic plugi...
ionic 拍照，从照片中选择 ，预览全都包括
06-15
### ionic 拍照、从照片库中选择照片及预览功能实现 #### 一、概述 在移动应用开发中，尤其是使用Ionic框架进行跨平台应用开发时，集成拍照功能、选择本地相册中的图片以及对所选图片进行预览是非常常见的需求。...
ionic 拍照上传图片
04-20
本篇文章将深入探讨如何在Ionic应用中实现拍照上传和选择本地图片的功能。 首先，我们需要了解 Ionic 的核心概念。Ionic 提供了一套完整的 UI 组件库，使开发者能够快速构建具有原生感观的移动应用界面。它利用 ...
ionic 拍照选择本地图片
04-20
在这个特定的场景中，"ionic 拍照选择本地图片"涉及到的是如何在 Ionic 应用中集成拍照和选择本地相册的功能。下面我们将深入探讨这一主题。 1. **Ionic 插件**： 在 Ionic 中，为了实现原生功能（如访问摄像头或...
详解ionic本地相册、拍照、裁剪、上传（单图完全版）
08-29
总的来说，这篇文章提供了一个完整的流程，涵盖了Ionic应用中本地相册选择、拍照、裁剪和上传单张图片的主要步骤。通过这样的集成，开发者可以轻松地在自己的应用中实现类似的功能，而无需引入不必要的额外插件。
详解angularJS+Ionic移动端图片上传的解决办法
10-19
本篇文章主要介绍了详解angularJS+Ionic移动端图片上传的解决办法 ，具有一定的参考价值，有需要的可以了解一下
ionic3+angularjs4实现多图片上传
12-10
ionic+angularjs+cordova调相机、相册实现多图片选择以及图片预览
Ionic2中的相册选择和拍照上传——ImgService
热门推荐
梦空间
04-19 1万+
目录目录 前言 Cordova准备 ImgService服务的实现 ImgService服务的使用 示例效果 相册选择器的汉化 参考前言　　在APP中启动相册选择器或者拍照上传图片这些功能是非常常见的。对于Ionic2，我们只能通过cordova插件实现调用原生的功能。下面将简单的封装一个选择相册或拍照上传图片的ImgService服务。具体如下。Cordova准备　　下载安装所需的Cordovar
IONIC拍照及图片上传（自定义图片名称和图片保存到指定位置）
QQ_852213985
11-17 1426
详情请参考官网：https://ionicframework.com/docs/native/camera/ 1.添加插件 $ ionic cordova plugin add cordova-plugin-camera $ npm install --save @ionic-native/camera  2.拍照和从相册获取图片只有一个参数的区别 strFileName: stri...
ionic调用本地相机拍照
qq_32163209的博客
01-28 2066
首先创建一个ionic项目，添加相机插件 $ ionic cordova plugin add cordova-plugin-camera $ npm install --save @ionic-native/camera 在app.module中引入插件 然后在对应ts文件中写调用函数 getPictureByCamera() { const option
IONIC如何为Ion-select列表添加图片
QQ_852213985
03-09 585
前景介绍： 上帝说：“要有光”，于是便从此有了光。 产品经理说：“语言列表需要加对应国籍的图片，便于识别”，于是，便有了这篇文章! 效果一： 下面是实现方法： html <ion-header> <ion-navbar> <ion-title>Home</ion-title> ...
Angular+ionic 实现上传图片
grantzhu0的博客
12-03 755
使用angular实现上传图片，包括图片的预览以及删除， 图片的预览及删除是用的ionic 的popover 实现的，效果如下： 1. 上传图片部分代码的实现 upload.html &lt;div class="picture-number"&gt; &lt;p &gt;图片上传&lt;/p&gt; &lt;p &gt;{{uploadPictureNum}}...
ionic3 图片上传（相册&拍照）
assassin_0302的博客
12-20 366
此插件用的不是官网插件，而是github上的仿微信的cordova插件 https://github.com/giantss/cordova-plugin-ImagePicker 因为直接从git上下载到项目，经常下载不下来，所以我先把代码下载到本地，然后由本地添加到项目中 步骤 1. html上写个click事件， 弹出弹窗选择相册或者拍照 2.选择其中一种，调用native插件，使用...
ionic3项目中调用手机自身摄像头，拍摄照片并上传
cmgdxgn1的博客
11-29 1944
** ionic3项目中调用手机自身摄像头，拍摄照片并上传 ** 今天我在研究ionic3手机App开发时，需要调用手机自带的摄像头拍照上传，在百度了一上午之后，***我发现：好多作者写的博客要么有头无尾，要么就是跟着操作一波后，代码报错了！！！！！！我的老天爷鸭，***所以为了让跟我有相同经历的新手们更快的掌握怎样快速调用ionic摄像头接口，我吐血整理了下面这篇文章，让大家少走一些弯路。 话不...
ionic5使用angular上传相册中的图片拍照上传
03-24
可以使用ionic-native的Camera插件来实现上传相册中的图片和拍照上传。具体实现可以参考以下代码： // 导入相关模块 import { Camera, CameraOptions } from '@ionic-native/camera/ngx'; import { File } from '@ionic-native/file/ngx'; import { Transfer, TransferObject } from '@ionic-native/transfer/ngx'; // 初始化相关变量 private fileTransfer: TransferObject; private imageSrc: string; // 构造函数中初始化fileTransfer constructor(private camera: Camera, private file: File, private transfer: Transfer) { this.fileTransfer = this.transfer.create(); } // 上传图片方法 uploadImage() { // 设置相机选项 const options: CameraOptions = { quality: 100, destinationType: this.camera.DestinationType.FILE_URI, sourceType: this.camera.PictureSourceType.PHOTOLIBRARY, encodingType: this.camera.EncodingType.JPEG, mediaType: this.camera.MediaType.PICTURE } // 调用相机插件获取图片 this.camera.getPicture(options).then((imageData) => { // 获取文件名 const fileName = imageData.substring(imageData.lastIndexOf('/') + 1); // 获取文件路径 const path = imageData.substring(0, imageData.lastIndexOf('/') + 1); // 移动文件到临时目录 this.file.moveFile(path, fileName, this.file.cacheDirectory, fileName).then((result) => { // 获取临时文件路径 const filePath = result.nativeURL; // 设置上传参数 const options = { fileKey: 'file', fileName: fileName, chunkedMode: false, mimeType: 'image/jpeg', headers: {} }; // 开始上传 this.fileTransfer.upload(filePath, 'http://example.com/upload.php', options).then((data) => { // 上传成功，返回服务器返回的数据 console.log(data); }, (err) => { // 上传失败，打印错误信息 console.log(err); }); }, (err) => { // 移动文件失败，打印错误信息 console.log(err); }); }, (err) => { // 获取图片失败，打印错误信息 console.log(err); }); }
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值