离子2：将表格中的文档，pdf上传到服务器 [英] ionic 2: Uploading docs, pdf to server in forms

问题描述

我在离子2中创建了一个表单，我有一个上传简历的字段，其类型为.docs或.pdf。我尝试添加如下，

I have created a form in ionic 2 where I have a field to upload resume which will be of type .docs or .pdf. I tried by adding as below,

<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]
})

提交我正在调用保存功能，如下所示，

on for submission I'm calling save function which is as below,

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

在consoel.log中，即使选择了有效文件，我也会变为空。有人可以建议我在离子2中整合输入类型文件的最佳方法是什么。

In consoel.log I'm getting null even after valid files is being selected. Can some one please suggest me what is the best way to integrate input type file inside form in ionic 2.

推荐答案

我终于找到了回答这个问题。您必须具有可用于上载文件的单独API。下面是在离子2中上传文件的详细步骤：

I Finally found answer for this question. You must have a separate API that can be used for uploading the file. Below is the detailed step to upload file in ionic 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/这可用于将文件上传到您的服务器。

1. Then install transfer plugin into your application from here: https://ionicframework.com/docs/native/transfer/ this can be used to upload the file into your server.

我用来从图库或相机拍照并通过上传来完整的代码API在这里： https://gist.github.com/coolvasanth/ab61fc337e6561be4559171b74221b1a

The complete code that I used for taking picture from gallery or from camera and uploading it via API is here: https://gist.github.com/coolvasanth/ab61fc337e6561be4559171b74221b1a

要上传.pdf，.docs类型的文件，请参阅：
https://gist.github.com/coolvasanth/b266c5bb382ddbfc60ca1c0f7c9f33c0

For uploading .pdf, .docs kind of file please refer this: https://gist.github.com/coolvasanth/b266c5bb382ddbfc60ca1c0f7c9f33c0

从手机中捕获视频通过API将其上传到服务器请使用： https://gist.github.com/coolvasanth/8d0b6a4cea480bc7017bce0ba3ec5bdb

To capture video from phone and upload it to server via API please use this : https://gist.github.com/coolvasanth/8d0b6a4cea480bc7017bce0ba3ec5bdb

要在iOS中选择除媒体（ex .pdf，.doc）以外的文件，您可以参考下面的链接。 https://gist.github.com/coolvasanth/d042a26deda75f5e390b42b87995f30d 。如果您想从iCloud中选择文件，请在xcode中启用此服务。你会在Project - > Capabilities - > iTune中找到它。

To choose a file other than media (ex .pdf, .doc) in iOS you can refer below link. https://gist.github.com/coolvasanth/d042a26deda75f5e390b42b87995f30d. In case if you want to choose a file from iCloud then please enable this service in xcode. You will find it in Project -> Capabilities -> iTune.

这篇关于离子2：将表格中的文档，pdf上传到服务器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！