文件上传到角4

Question

当我试图在我的角4应用程序中安装"npm安装NG2文件-上载-保存“时，它会抛出

UNMET PEER DEPENDENCY @4.1.0
UNMET PEER DEPENDENCY @4.1.0
`-- ng2-file-upload@1.2.1

上传无法运行我的应用程序抛出

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

这是我的

<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(大家长模块)中导入/更改任何东西。

能帮我个忙吗.

Answer 1

上传图片在角4没有插件，这是一篇文章，可能是值得一试。在没有插件的情况下以角4上传图像

它强调以下几点：

1. 使用.request()方法而不是.post
2. 把formData直接送进身体。
3. 自定义头项并构造新的RequestOptions对象。
4. 为了发送带有图像内容的formData，必须删除内容类型标头。

Answer 2

我不认为我们需要额外的图书馆

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

现在，我们已经准备好用拖放方式上传文件，点击链接按钮并上传文件中的额外数据。

请参阅这里的完整文章角4通过拖放方式上传数据和web api的文件

Answer 3

常见的解决方案是创建像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 { }

只需像这样在您的share.module中导入app.module。

import { NgModule } from '@angular/core';
import { SharedModule} from '../shared/shared.module';

@NgModule({
    imports: [SharedModule],
    declarations: [],
    exports :[],
   })
export class AppModule { }

看一看角度4中的懒惰加载