无法绑定到“上载器”，因为它不是“输入”的已知属性

Question

i was new in ionic and angular i want small project for testing in ionic that upload image by post method and nodejs express file images....

but when i run displayed error for [uploader] in my input...

there is my code of home.html

 <ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      Home
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

  <div class="container">
    <input type="file" name="photo" ng2FileSelect [uploader]="uploader" />
    <button type="button" class="btn btn-success btn-s" 
      (click)="uploader.uploadAll()" 
      [disabled]="!uploader.getNotUploadedItems().length" >
          Upload an Image
    </button>
  </div>

    <ion-card>
      <ion-card-header>
        <img src="http://localhost:3000/images/home.jpg" alt="">
      </ion-card-header>
    </ion-card>
</ion-content>

and this my home.ts

import { Component } from '@angular/core';
import { HttpClient, HttpEventType } from '@angular/common/http';
// import {DomSanitizer} from '@angular/platform-browser';
import {  FileUploader, FileSelectDirective } from 'ng2-file-upload';
const URL = 'http://localhost:3000/images/';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  title = 'ng8fileupload';
  public uploader: FileUploader = new FileUploader({ url: URL, 
  itemAlias: 'photo' });


  public db: any;
  public image: any;
  base64Image;
  fileData: File = null;
  constructor(private http: HttpClient,) {

  }
  ngOnInit() {
    this.uploader.onAfterAddingFile = (file) => { file.withCredentials 
    = false; };
    this.uploader.onCompleteItem = (item: any, response: any, status: 
    any, headers: any) => {
         console.log('ImageUpload:uploaded:', item, status, response);
         alert('File uploaded successfully');
    };
 }
}

and this is my app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { FileSelectDirective, FileUploadModule } from 'ng2-file- 
upload';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
  declarations: [
    AppComponent
  ],
  entryComponents: [],
  imports: [
    BrowserModule,
    HttpClientModule,
    FileUploadModule,
    FormsModule,
    IonicModule.forRoot(),
    AppRoutingModule,

  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

and this serverside

const path = require('path');
const express = require('express');
const multer = require('multer');
const bodyParser = require('body-parser')
const app = express();

const DIR = '/images';

let storage = multer.diskStorage({
    destination: (req, file, cb) => {
      cb(null, DIR);
    },
    filename: (req, file, cb) => {
      cb(null, file.fieldname + '-' + Date.now() + '.' + path.extname(file.originalname));
    }
});
let upload = multer({storage: storage});

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));

app.use(function (req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8100');
  res.setHeader('Access-Control-Allow-Methods', 'POST');
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested- 
   With,content-type');
  res.setHeader('Access-Control-Allow-Credentials', true);
  next();
});

app.get('/api', function (req, res) {
  res.end('file catcher example');
});

app.post('/api/upload',upload.single('photo'), function (req, res) {
    if (!req.file) {
        console.log("No file received");
        return res.send({
          success: false
        });

      } else {
        console.log('file received');
        return res.send({
          success: true
        })
      }
});

const PORT = process.env.PORT || 3000;

app.listen(PORT, function () {
  console.log('Node.js server is running on port ' + PORT);
});

please help me

Answer 1

Inside your home.ts file component decorator add the directive for the file Uploader package you have used. It is shown below:

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  directives: [FILE_UPLOAD_DIRECTIVES]
})

Also change the import line as mentioned below:

import {  FileUploader, FILE_UPLOAD_DIRECTIVES } from 'ng2-file-upload';

Also change the import line in app.module.ts as well!

I am sure this should work!