我有一个 Ionic 2 PWA,所以它应该在浏览器中运行。我希望用户可以将文件上传到服务器。因为 ionic native 的文件选择器只适用于 android,所以我不能在浏览器中使用它。所以我的想法是使用 type="file"的输入字段。但我的问题是,我只得到文件名而不是路径。并上传我需要路径的文件。起初我用 ngModel 尝试过,然后用 ionic 的表单生成器尝试过。这是我的表单生成器代码:
TS:
import {Component} from '@angular/core';
import {Validators, FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'page-test',
templateUrl: 'test.html',
})
export class TestPage {
private file : FormGroup;
constructor( private formBuilder: FormBuilder ) {
this.file = this.formBuilder.group({
image: ['']
});
}
logForm(){
console.log(this.file.value)
}
}
HTML:
...
<ion-content padding>
<form [formGroup]="file" (ngSubmit)="logForm()">
<input type="file" size="50" formControlName="image">
<button ion-button type="submit">Submit</button>
</form>
</ion-content>
但就像我说的,控制台只记录文件名:
Object { image: "2970.jpg" }
如果我记录“this.file”(没有.value),我发现那里既没有文件对象也没有类似的东西。有没有办法在 ionic 浏览器应用程序中获取文件路径以将其上传到服务器?
最佳答案
我不知道你是否已经找到解决方案,但无论如何我都会发布......
对于此解决方案,您不需要任何外部 npm 模块。这是一步一步
通过运行创建新组件
$ ionic generate component file-uploader
然后复制粘贴下面的代码
src/components/file-uploader/file-uploader.ts
import { Component, ViewChild, ElementRef, Input } from '@angular/core';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';
import { HttpClient } from '@angular/common/http';
/**
* Usage
*
* <file-uploader [apiUrl]="apiUrl" [params]="uploadParams"></file-uploader>
*
* <file-uploader [apiUrl]="apiUrl" [params]="[{'key':'language_code', 'value': 'en'}]"></file-uploader>
*
*/
@Component({
selector: 'file-uploader',
templateUrl: 'file-uploader.html'
})
export class FileUploaderComponent
{
@ViewChild('file') fileInput: ElementRef;
@Input('apiUrl') apiUrl: string = null;
@Input('params') params: Array<{key: string, value: string}> = [];
@Input('buttonText') buttonText: string = 'Upload';
@Input('buttonType') buttonType: 'button' | 'icon' = 'icon';
@Input('icon') icon: string = 'cloud-upload';
@Input('onUploadSuccess') onUploadSuccess: (file: File, response: any) => void
= function (file: File, response: any) { console.log(file); console.log(response); };
@Input('onUploadError') onUploadError: (file: File) => void = function (error: any) { console.log(error) };
fileToUpload: File = null;
constructor(private httpClient: HttpClient)
{
}
triggerFileInputClick()
{
this.fileInput.nativeElement.click();
}
onFileInputChange(files: FileList)
{
this.fileToUpload = files.item(0);
if (this.fileInput.nativeElement.value != '')
{
this.upload();
}
}
upload()
{
const formData: FormData = new FormData();
formData.append('file', this.fileToUpload, this.fileToUpload.name);
this.params.map(param => {
formData.append(param.key, param.value);
});
let headers = {};
this.httpClient
.post(this.apiUrl, formData, { headers: headers })
// .map(() => { return true; })
.subscribe(response => {
this.onUploadSuccess(this.fileToUpload, response);
this.fileInput.nativeElement.value = '';
}, error => {
this.onUploadError(error);
});
}
}
src/components/file-uploader/file-uploader.html
<div>
<input type="file" #file (change)="onFileInputChange($event.target.files)">
<button *ngIf="buttonType == 'button'" ion-button (click)="triggerFileInputClick()">{{buttonText}}</button>
<ion-icon *ngIf="buttonType == 'icon'" name="cloud-upload" (click)="triggerFileInputClick()"></ion-icon>
</div>
src/components/file-uploader/file-uploader.scss
file-uploader {
[type=file] {
display: none;
}
}
src/pages/home/home.html
<file-uploader [apiUrl]="apiUrl" [params]="[{'key':'language_code', 'value': languageCode}]"></file-uploader>
现在您需要做的就是在 NgModule 中加载组件并使用它。
我最后要提的是,如果您遇到未定义属性的问题,例如apiUrl,你应该在 ngOnInit() 方法中初始化它们。
希望对你有帮助
更新 不要忘记将文件 uploader 导入到使用 uploader 的组件中,否则你会得到无法绑定(bind)到“apiUrl”,因为它不是“文件 uploader ”的已知属性错误。 我所做的是在 components 文件夹中创建了新的模块 components.module.ts 文件。然后我将文件 uploader 组件导入其中。为了使用它,我将组件模块导入到使用文件 uploader 组件的组件中。
src/components/components.module.ts
import { IonicModule } from 'ionic-angular';
import { NgModule } from '@angular/core';
import { FileUploaderComponent } from './file-uploader/file-uploader';
@NgModule({
declarations: [
FileUploaderComponent
],
imports: [
IonicModule,
],
exports: [
FileUploaderComponent
]
})
export class ComponentsModule {}
src/pages/home/home.module.ts
import { ComponentsModule } from '../../components/components.module';
关于file - Ionic 2 从浏览器上传文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45730330/