LIOT.MobileWeb/src/app/components/wx-img/wx-img.component.ts

import {Component, forwardRef, Input, Output} from '@angular/core';
import {wxService} from "../../services/wxService";
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
import {NavController, NavParams, ToastController} from "ionic-angular";

@Component({
    selector: 'app-wx-img',
    templateUrl: './wx-img.component.html',
    providers: [{
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => WxImgComponent),
      multi: true
    }]
})
export class WxImgComponent implements ControlValueAccessor {
  registerOnChange(fn: any): void {
    this.propagateChange = fn;
  }

  registerOnTouched(fn: any): void {
  }

  setDisabledState(isDisabled: boolean): void {
  }

  writeValue(obj: any): void {
    if (obj) {
      this.pictureUrl = obj;
      this.urlChanged();
    }
  }
  @Output() @Input() public pictureUrl: string;
  hasPicture: boolean = false;
  private propagateChange: any = {};

  constructor(private wxService: wxService,public navCtrl: NavController, public navParams: NavParams,public toastCtrl: ToastController,) {
  }

  ngOnInit() {
    this.urlChanged();
  }

  urlChanged() {
    if (this.pictureUrl) {
      this.hasPicture = true;
    } else {
      this.hasPicture = false;
    }
  }

  openFile(): void {
    let $wxService = this.wxService;
    let that = this;
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (chooseRes) {
        //console.log(chooseRes);
        that.presentToast(chooseRes[0].toString(),"success");
        that.presentToast(chooseRes[1],"success");
        that.presentToast(chooseRes,"success");
        that.presentToast(chooseRes.localIds,"success");
        if (chooseRes.localIds.length > 0) {
          let localId = chooseRes.localIds[0];// 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
          that.presentToast(localId,"success");
          if (localId.indexOf("wxlocalresource") != -1) {
            localId = localId.replace("wxlocalresource", "wxLocalResource");
          }
          wx.uploadImage({
            localId: localId,
            isShowProgressTips: 1,
            success: function (uploadRes) {
              $wxService.uploadMediaID(uploadRes.serverId)
              .then(res => {
                if (res.isSuccess) {
                  let pictureUrl = res.message;
                  that.hasPicture = true;
                  that.pictureUrl = pictureUrl;
                  that.propagateChange(that.pictureUrl);
                } else {
                  that.presentToast(res.message,res.isSuccess?"success":"error");
                  // that.reload();
                }
              }); // localData是图片的base64数据，可以用img标签显示
            }
          });
        }
      }
    });
  }

  presentToast(message:string,classstyle:string) {
    let toast = this.toastCtrl.create({
      message:  message,
      duration: 3000,
      position: 'middle',
      cssClass: classstyle
    });

    toast.onDidDismiss(() => {
      //console.log('Dismissed toast');
    });

    toast.present();
  }
}