「npm install ng2-file-upload --save」をangular 4アプリケーションがスローするアプリケーションにインストールしようとすると
UNMET PEER DEPENDENCY @4.1.0
UNMET PEER DEPENDENCY @4.1.0
`-- [email protected]
アップロードが機能していませんが、アプリケーションがスローします
「「入力」の既知のプロパティではないため、「アップローダー」にバインドできません。」
これはmy HTMLです
<input type="file" ng2FileSelect [uploader]="upload" multiple formControlName="file" id="file"/>
およびそのコンポーネント
import { FileUploadModule } from 'ng2-file-upload/ng2-file-upload';
import { FileSelectDirective, FileUploader } from 'ng2-file-upload/ng2-file-
upload';
export class PersonalInfoComponent implements OnInit
{
public upload:FileUploader= new FileUploader({url:""});
}
親モジュール
import { FileUploadModule } from 'ng2-file-upload/ng2-file-upload';
@NgModule({
imports: [
..
....
..
FileUploadModule
],
export class RegistrationModule { }
appModule(Grand Parent Module)で何もインポート/変更しませんでした。
誰かがこれを助けてくれますか...
Angular 4プラグインなしで画像をアップロードするこれは試してみる価値のある記事です。 アップロードAngular 4プラグインなしの場合 の画像
次の点を強調しています。
余分なライブラリは必要ないと思う
onFileChange(event){
let files = event.target.files;
this.saveFiles(files);
}
@HostListener('dragover', ['$event']) onDragOver(event) {
this.dragAreaClass = "droparea";
event.preventDefault();
}
@HostListener('dragenter', ['$event']) onDragEnter(event) {
this.dragAreaClass = "droparea";
event.preventDefault();
}
@HostListener('dragend', ['$event']) onDragEnd(event) {
this.dragAreaClass = "dragarea";
event.preventDefault();
}
@HostListener('dragleave', ['$event']) onDragLeave(event) {
this.dragAreaClass = "dragarea";
event.preventDefault();
}
@HostListener('drop', ['$event']) onDrop(event) {
this.dragAreaClass = "dragarea";
event.preventDefault();
event.stopPropagation();
var files = event.dataTransfer.files;
this.saveFiles(files);
}
これで、ドラッグアンドドロップでファイルをアップロードする準備が整いました。リンクボタンをクリックして、追加のデータをファイルでアップロードすることもできます。
こちらの記事全文を参照してください Angular 4データとWeb APIを含むファイルをドラッグ&ドロップでアップロード
一般的な解決策は、shared module
のような新しいモジュールを作成することです。このような共有モジュールを作成し、app.module
ファイルに共有モジュールをインポートするだけです
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { FileSelectDirective, FileDropDirective } from 'ng2-file-upload';
import { FileUploadModule } from 'ng2-file-upload/ng2-file-upload';
@NgModule({
imports: [ FileUploadModule],
declarations: [ ],
exports :[ FileSelectDirective, FileDropDirective, FormsModule,
FileUploadModule],
})
export class SharedModule { }
このようにapp.moduleにshare.moduleをインポートするだけです。
import { NgModule } from '@angular/core';
import { SharedModule} from '../shared/shared.module';
@NgModule({
imports: [SharedModule],
declarations: [],
exports :[],
})
export class AppModule { }
angular 4で遅延読み込みを見てください
これを行うために外部ライブラリは必要ありません。以下のサンプルコードを確認してください
@Component({
selector: 'app-root',
template: '<div>'
+ '<input type="file" (change)="upload($event)">'
+ '</div>',
})
export class AppComponent {
constructor(private _service: commonService) { }
upload(event: any) {
let files = event.target.files;
let fData: FormData = new FormData;
for (var i = 0; i < files.length; i++) {
fData.append("file[]", files[i]);
}
var _data = {
filename: 'Sample File',
id: '0001'
}
fData.append("data", JSON.stringify(_data));
this._service.uploadFile(fData).subscribe(
response => this.handleResponse(response),
error => this.handleError(error)
)
}
handleResponse(response: any) {
console.log(response);
}
handleError(error: string) {
console.log(error);
}
}
primengからfileuploadをインポートするか、単純なファイルアップローダーを使用します
[〜#〜] html [〜#〜]
<p-fileUpload name="myfile[]" customUpload="true"
(uploadHandler)="uploadSuiteForRelease($event)" auto="auto"></p-fileUpload>
[〜#〜] ts [〜#〜]
var data = new FormData();
let index: number = 0;
if (this.files != undefined)
{
for (let file of this.files.files)
{
data.append("myFile" + index, file);
++index;
}
}
data.append('viewModel', JSON.stringify(<<data model that needs to be
sent with request>>));
このデータをリクエストで送信して、this._httpClient.post( 'api/controller'、data)を返します。
サーバー
[HttpPost]
public async Task<IHttpActionResult> Post()
{
HttpPostedFile httpPostedFile = null;
var viewModel = JsonConvert.DeserializeObject<ReleasesViewModel>(HttpContext.Current.Request["viewModel"]);
if (viewModel != null)
{
if (HttpContext.Current.Request.Files.AllKeys.Any())
{
var cnt = HttpContext.Current.Request.Files.Count;
for (int i = 0; i < cnt; i++)
{
httpPostedFile = HttpContext.Current.Request.Files["myFile" + i];
}
}
}
}
HTML:
<input type="file" (change)="onFileChange($event)" id="file">
TS:
@Component({
......
})
export class myComponent{
form: FormGroup;
contructor(fb: FormGroup){
form: fb.group({file: null});
}
//fVals comes from HTML Form -> (ngSubmit)="postImage(form.value)"
postImage(fVals){
let body = new FormData();
body.append('file', formValues.file);
let httpRequest = httpclient.post(url, body);
httpRequest.subscribe((response) =>{
//..... handle response here
},(error) => {
//.....handle errors here
});
}
onFileChange(event) {
if(event.target.files.length > 0) {
let file = event.target.files[0];
this.form.get('file').setValue(file);
}
}
}