离子2:以表格形式上传文档,pdf到服务器



>我在ionic 2中创建了一个表单,其中我有一个字段可以上传简历,该字段的类型为.docs或.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即使在选择了有效文件后,我也得到空。有人可以建议我将输入类型文件集成到 ionic 2 表单中的最佳方法是什么。

我终于找到了这个问题的答案。您必须具有可用于上传文件的单独 API。以下是在 ionic 2 中上传文件的详细步骤:

  1. 首先将ionic文件选择器插件安装到您的app.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. 要在iOS中选择媒体以外的文件(例如.pdf,.doc),您可以参考以下链接。 https://gist.github.com/coolvasanth/d042a26deda75f5e390b42b87995f30d。如果您想从iCloud中选择文件,请在xcode中启用此服务。您可以在Project -> Capabilities-> iTune中找到它。

相关内容

  • 没有找到相关文章

最新更新