Question

我正在Ionic App中工作，我想使用文件输入字段和文件本机插件来更新ionic中的用户个人资料图像。

这是我的 updateprofileimage.html ：

<ion-content padding style="text-align: center;">
  <ion-grid align-items-center justify-content-center style="height: 100%;">
    <ion-row align-items-center justify-content-center style="height: 100%;">
      <ion-col align-self-center justify-content-center col-12 col-md-6 col-xl-3 style="text-align: center;">
        <h2 class="myformh2">Update Profile Picture</h2>
        <h4 class="myformh2">Image Preview</h4>
        <img src="{{img_upload}}" class="newimg22" />
        <form [formGroup]="updateprofileimg" (ngSubmit)="changeProfileImage2()">
          <ion-list>
            <ion-item class="newitem2">
              <ion-input placeholder="Upload Image" type="file" [(ngModel)]="img_upload" formControlName="img_upload" required></ion-input>
            </ion-item>
            <div>
              <button [disabled]="!updateprofileimg.valid" ion-button type="submit" class="newbtn11" color="primary"
                block>Change Profile Picture</button>
            </div>
          </ion-list>
        </form>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

在此html中，我有一个文件输入字段，我也想显示图像的预览。

这是我的 updateprofileimage.ts ：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
import { RestapiProvider } from '../../providers/restapi/restapi';
import { Storage } from '@ionic/storage';
import { ManageaccountPage } from './../manageaccount/manageaccount';
import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer/ngx';
import { File } from '@ionic-native/file';
import { FilePath } from '@ionic-native/file-path/ngx';
import { FileChooser } from '@ionic-native/file-chooser/ngx';

@IonicPage()
@Component({
  selector: 'page-updateimage',
  templateUrl: 'updateimage.html',
})
export class UpdateimagePage {
  updateprofileimg : FormGroup;
  img_upload: any = [];
  selectedImage;
  imageUrl;
  converted_image;
  responseEdit: any;
  constructor(public navCtrl: NavController, public navParams: NavParams,
    private formBuilder: FormBuilder, public restProvider: RestapiProvider,
    private storage: Storage, private alertCtrl: AlertController, 
    private filePath: FilePath, private fileChooser: FileChooser, 
    private transfer: FileTransfer, private file: File) {
      this.updateprofileimg = this.formBuilder.group({
        img_upload: ['', Validators.required],
      });
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad UpdateimagePage');
  }

  changeProfileImage2()
  {

  this.fileChooser.open()
  .then(uri => console.log(uri))
  .catch(e => console.log(e));

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

  }
}

我还安装了文件和文件传输本机插件，但由于不知道正确的代码，因此无法使用它们。

这是我的 service.ts ：

updateprofileimg(credentials, type) {

  var headers = new HttpHeaders();
  headers.append('Access-Control-Allow-Origin' , '*');
  headers.append('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
  headers.append('Accept','application/json');
  headers.append('Content-Type','application/json');
  headers.append('Access-Control-Allow-Credentials','true');
  headers.append('Access-Control-Allow-Headers','Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With');

  let v = new FormData();
  for(var k in credentials)v.append(k,credentials[k]);
  return this.http.post(apiUrl + type, credentials, {headers: headers});
}

我必须将图像发送到该图像的服务，以将其更新到后端并获取该图像以显示为个人资料图像。

非常感谢您的帮助。

Answer 1

看一下可以解决您提到的问题的帖子 https://www.djamware.com/post/5ae9c9ca80aca714d19d5b9f/ionic-3-angular-5-and-cordova-base64-image-upload-example

如何使用文件本机插件更新Ionic中的个人资料图像

1 个答案: