Ionic 2从浏览器上传文件
我有一个离子2 PWA，所以它应该可以在浏览器中运行。我希望用户可以上传文件到服务器。因为ionic native中的文件选择器只适用于android，所以我不能在浏览器中使用它。所以我的想法是使用带有文件“type=”的输入域。但我的问题是，我只得到文件名，而不是路径。要上传文件，我需要路径。首先，我尝试使用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>但就像我说过的，控制台只记录文件名：
图片对象{
："2970.jpg“}
如果我登录"this.file“(没有.value)，我发现既没有文件对象，也没有类似的东西。有没有办法在离子浏览器应用程序中获取文件路径，以便将其上传到服务器？
回答 1
Stack Overflow用户
发布于 2018-03-03 22:25:41
我不知道你是否已经找到了一个解决方案，但我还是会发布它的……
对于这个解决方案，您不需要任何外部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()方法中初始化它们。
希望这能有所帮助
UPDATE不要忘记将文件上传器导入正在使用uploader的组件中，否则您将得到无法绑定到'apiUrl‘，因为它不是' file - uploader '错误的已知属性。我所做的是在components文件夹中创建了新的模块components.module.ts文件。然后我将文件上传器组件导入其中。为了使用它，我将组件模块导入到使用文件上传器组件的组件中。
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';https://stackoverflow.com/questions/45730330
复制相似问题