ionic 的项目实现从手机相册选取图片或拍照并上传至服务器

【 一 】使用 bower 下载 ng-file-upload 插件

             (bower 是什么以及如何安装与使用在我的博客中有一篇文章介绍,可移步查看)

【 二 】app 中引入 'ngFileUpload'

        (function(){
            angular.module('starter', [
                'ionic','ngFileUpload'
            ]);
       })();
 【 三 】HTML 文件中

       <ion-item  class="ionItem1" ngf-select ng-model="data.file" name="file" ngf-pattern="'image/*'" ngf-multiple="false">
            <label class="item_title">头像</label>
            <img src="" class="headerImage"  ngf-src="data.file || data.defaultImage">
            <span class="ion-chevron-right"></span>
        </ion-item>

【四】控制器中(控制器需注入
  • 5
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
可以使用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); }); }
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值