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

Question

我是 ionic 和 Angular 方面的新手，我想要在 ionic 中进行测试的小项目，该项目通过 post 方法上传图像和 nodejs 表达文件图像......

但是当我在输入中运行 [uploader] 的显示错误时...

有我的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>

这是我的家.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');
    };
 }
}

这是我的 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 {}

还有这个服务器端

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);
});

请帮帮我

Answer 1

在你的 home.ts 文件组件装饰器中添加你使用的文件上传器包的指令。如下图所示：

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

同时改变导入行，如下所述：

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

还要更改 app.module.ts 中的导入行！

我相信这应该可行！