如何将图像从Ionic 3应用程序上传到内置ASP.NET CORE的Web服务器?

时间:2018-07-27 03:04:04

标签: asp.net .net ionic-framework asp.net-web-api asp.net-core

(我已经提前说过了,对不起我的英语不好),下面是我的打字稿代码,可以很好地工作。 takephoto方法打开设备库,让用户选择设备中存储的图片之一,uploadFile方法将数据图像传输到我在asp.net核心中开发的restfull api中:

export class SelecionarAvatarPage {
  imgrc:any ='assets/imgs/blank-profile-picture-973460_640-300x300.png';
  imgurl: any =' ';
  imgname: string;
  constructor(public navCtrl: NavController, private transfer: FileTransfer,  public loadingCtrl: LoadingController, private camera: Camera, public navParams: NavParams, private platform: Platform, public toastCtrl: ToastController) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad SelecionarAvatarPage');
  }
  takePhoto(sourceType:number) {
    const options: CameraOptions = {
      quality: 50,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      correctOrientation: true,
      sourceType:sourceType,
    }
    this.camera.getPicture(options).then((imageData) => {
      this.imgname = imageData;
      let base64Image = 'data:image/jpeg;base64,' + imageData;
      this.imgrc = base64Image;
      this.imgurl = imageData;
    }, (err) => {
      // Handle error
    });
  }
  presentToast(msg) {
    let toast = this.toastCtrl.create({
      message: msg,
      duration: 3000,
      position: 'bottom'
    });

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

    toast.present();
  }
  uploadFile() {
    let loader = this.loadingCtrl.create({
      content: "Uploading..."
    });
    loader.present();
  const fileTransfer: FileTransferObject = this.transfer.create();
  loader.dismiss();
    let options: FileUploadOptions = {
      fileKey: 'ionicfile',
      fileName: 'ionicfile',
      chunkedMode: false,
      mimeType: "image/jpeg",
      headers: {}
    }

    fileTransfer.upload(this.imgurl, 'http://192.168.0.000:5000/api/image', options)
      .then((data) => {
      console.log(data);
      this.presentToast("Imagem foi enviada");
    }, (err) => {
      console.log(err);
      loader.dismiss();

    }); 
  }

我想知道如何通过ASP.NET Core中的File Transfer插件上传离子应用程序发送的图像

2 个答案:

答案 0 :(得分:1)

上传代码:             postFile(imageData,id){

          this.commonService.showLoader("Uploading........");
          let currentName = imageData.substr(imageData.lastIndexOf('/') + 1);
          let correctPath = imageData.substr(0, imageData.lastIndexOf('/') + 1);


          let base64Image = imageData;

          this.filePath.resolveNativePath(imageData)
          .then(filePath =>base64Image)
          .catch(err => console.log(err));



          console.log(base64Image);
          const fileTransfer = this.transfer.create();
          let imageName = base64Image;

          var options: FileUploadOptions = {
            fileKey: "file",
            fileName: imageName.substr(imageName.lastIndexOf('/') + 1),
            mimeType: "image/png/jpeg",
            chunkedMode: false,
            params:{'Id': id},
            headers: { 'Authorization':'Bearer '+ sessionStorage.getItem("token")   }
          }
          return new Promise((resolve, reject) => {


            fileTransfer.upload(imageName,encodeURI( this.MainURL + "/UploadMedia"), options)
              .then((data) => {



                console.log(data);
                resolve(200);
              }, (err) => {
                this.commonService.hideLoader();
                reject(500);
              })
          })
        }

获取图像的代码:private OpenCamera(): void { const options: CameraOptions = { quality: 50, destinationType: this.camera.DestinationType.FILE_URI, encodingType: this.camera.EncodingType.JPEG, mediaType: this.camera.MediaType.PICTURE, correctOrientation: true, sourceType: this.camera.PictureSourceType.CAMERA, saveToPhotoAlbum: true }

this.camera.getPicture(options).then((imageData) => {
  //   let base64Image = 'data:image/jpeg;base64,' + imageData;
  let s = imageData;
  this.AddIssueObj.file.push(s);
  this.uploadcount = this.AddIssueObj.file.length;
}, (err) => {
  // Handle error
});

}

Use destinationType: this.camera.DestinationType.DATA_URI, Becasue URL wont help you to send data to server but URI does. Plugins u need to use.从'@ ionic-native / file-transfer'导入{FileUploadOptions}; 从'@ ionic-native / file'导入{File};

答案 1 :(得分:0)

知道了,我通过将目标类型替换为this.camera.DestinationType.FILE_URI而不是this.camera.DestinationType.DATA_URL来解决了这个问题

const options: CameraOptions = {
      quality: 50,
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      correctOrientation: true,
      sourceType:sourceType,
    }