拍照上传

安装插件

  1. 相机插件
  2. ionic cordova plugin add cordova-plugin-camera
  3. npm install @ionic-native/camera
  5. 文件插件， 默认情况下先不引入，因为后面会报错
  6. ionic cordova plugin add cordova-plugin-file
  7. npm install @ionic-native/file
  9. 文件上传插件
  10. ionic cordova plugin add cordova-plugin-file-transfer
  11. npm install @ionic-native/file-transfer

app.module.ts

  1. import { Camera } from '@ionic-native/camera/ngx';
  2. import { File } from '@ionic-native/file/ngx';
  3. import {FileTransfer} from '@ionic-native/file-transfer/ngx';
  5. 修改providers中添加：
  7. Camera,
  8. File,
  9. FileTransfer,

使用地方

  1. import { Camera, CameraOptions } from '@ionic-native/camera/ngx';
  2. import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer/ngx';
  7. constructor(private camera: Camera,private transfer: FileTransfer) { }
  11.  // 拍照
  12.     imgUpload() {
  13.       const options: CameraOptions = {
  14.           quality: 100,   // 图片质量
  15.           destinationType: this.camera.DestinationType.FILE_URI, // 返回类型 .FILE_URI 返回文件地址 .DATA_URL 返回base64编码
  16.           encodingType: this.camera.EncodingType.JPEG, // 图片格式 JPEG=0 PNG=1
  17.           mediaType: this.camera.MediaType.PICTURE, // 媒体类型
  18.           sourceType: this.camera.PictureSourceType.CAMERA, // 图片来源  CAMERA相机 PHOTOLIBRARY 图库
  19.           allowEdit: true, // 允许编辑
  20.           targetWidth: 300, // 缩放图片的宽度
  21.           targetHeight: 300, // 缩放图片的高度
  22.           saveToPhotoAlbum: false, // 是否保存到相册
  23.           correctOrientation: true, // 设置摄像机拍摄的图像是否为正确的方向
  24.       };
  26.       this.camera.getPicture(options).then((imageData) => {
  27.           // 返回拍照的地址
  28.           this.doUpload(imageData);
  29.       }, (err) => {
  30.           alert(err);
  31.       });
  32.   }
  35.   // 文件上传
  36.   doUpload(src: any) {
  37.     const fileTransfer: FileTransferObject = this.transfer.create();
  39.     const options: FileUploadOptions = {
  40.         fileKey: 'file',
  41.         fileName: 'name.jpg',
  42.         mimeType: 'image/jpeg',
  43.         httpMethod: 'POST',
  44.         params: { username : '张三'},
  45.         headers: {}
  46.     };
  48.     const api = 'http://127.0.0.1/imgupload';
  50.     fileTransfer.upload(src, encodeURI(api), options)
  51.     .then((data) => {
  52.         alert(JSON.stringify(data));
  53.     }, (err) => {
  54.         alert(JSON.stringify(err));
  55.     });
  56.   }

https://ionicframework.com/docs/native/camera/

相册

安装插件

  1. ionic cordova plugin add cordova-plugin-telerik-imagepicker
  3. npm install @ionic-native/image-picker

app.module.ts

  1. import { ImagePicker   } from '@ionic-native/image-picker/ngx';
  3. 修改providers中添加：
  5. ImagePicker,

https://ionicframework.com/docs/native/image-picker/

汉化

  1. platforms\android\app\src\main\res 目录下
  3. 增加values-zh 文件，新建  multiimagechooser_strings_hu.xml 文件
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <resources>
  3.     <string name="multi_app_name">图片选择器</string>
  4.     <string name="free_version_label">还可以选择 %d 张图片</string>
  5.     <string name="error_database">打开图像数据库时出错,请反馈问题.</string>
  6.     <string name="requesting_thumbnails">请求缩略图，请耐心等待</string>
  7.     <string name="multi_image_picker_processing_images_title">正在处理...</string>
  8.     <string name="multi_image_picker_processing_images_message">请稍等...</string>
  9.     <string name="discard" translatable="false">取消</string>
  10.     <string name="done" translatable="false">确定</string>
  11. </resources>