2017-04-11 40 views
2

我已經創建了一個離子2的形式,我有一個領域上傳簡歷,這將是類型.docs或.pdf。我試圖通過如下增加,離子2:上傳文檔,pdf格式的服務器

<form [formGroup]="myForm"> 

<ion-list> 
      <ion-item> 

       <input type="file" formControlName="upresume_one" name="upresume_one"/> 
       <p>Supported formats .doc,.docs and .pdf[Max file size: 500KB]</p> 
      </ion-item> 
     <div class="text-right"> 
       <button ion-button style="background-color: #16a085;color: white;" color="secondary" (click)="save(myForm.value)">Submit</button> 
      </div> 

     </ion-list> 


</form> 

我.ts文件如下:

myForm: FormGroup; 
    private myData: any; 

constructor(public navCtrl: NavController, 
     public navParams: NavParams, 
     private builder: FormBuilder, 
     private userProfileService: UserProfileService, 
     private progressDialog: ProgressDialog) { 

this.myForm = builder.group({ 
'upresume_one': ['', Validators.required] 
}) 

上提交我打電話保存功能是如下,

save(formData) { 
console.log('Form data is ', formData); 
} 

在consoel.log中,即使在選擇了有效文件後,我也會收到null。有人可以請我建議什麼是最好的方式集成輸入類型文件裏面的形式離子2.

回答

6

我終於找到了這個問題的答案。您必須有一個可用於上傳文件的獨立API。下面是在離子2上傳文件的詳細步驟:

  1. 首先在您的應用程序中安裝離子文件選擇器插件。 https://ionicframework.com/docs/native/file-chooser/

    1. 將此代碼保存在某個函數中,您可以從一個表示上傳簡歷或某個文件的按鈕觸發該函數。
this.fileChooser.open() 
    .then(uri => console.log(uri)) 
    .catch(e => console.log(e)); 
  1. 然後從這裏安裝插件轉移到應用程序:https://ionicframework.com/docs/native/transfer/這可以用於將文件上傳到服務器。

  2. 完整的代碼,我用從畫廊或相機拍照,並通過API上傳它是在這裏:https://gist.github.com/coolvasanth/ab61fc337e6561be4559171b74221b1a

  3. 對於上傳.PDF,.docs類型的文件,請參閱本: https://gist.github.com/coolvasanth/b266c5bb382ddbfc60ca1c0f7c9f33c0

  4. 要從手機拍攝視頻,並通過API將其上傳到服務器,請使用此:https://gist.github.com/coolvasanth/8d0b6a4cea480bc7017bce0ba3ec5bdb

  5. 要選擇比媒體(如.PDF,.DOC)在iOS中,你可以參考下面的林以外的文件ķ。 https://gist.github.com/coolvasanth/d042a26deda75f5e390b42b87995f30d。如果你想從iCloud中選擇一個文件,那麼請在xcode中啓用該服務。你可以在Project - > Capabilities - > iTune中找到它。

+1

文件選擇僅適用於Android。關於IOS呢? –

+0

編輯答案請檢查。 – Vasanth