在Angular 4中上传文件 [英] File Upload in Angular 4

问题描述

当我尝试安装时 "npm安装ng2-file-upload --save" 在我的angular 4应用程序中，它会抛出

when I'm trying to install "npm install ng2-file-upload --save" in my angular 4 application it throws

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

上传失败 我的应用抛出

and upload is not working my applications throws

由于它不是'input'的已知属性，因此无法绑定到'uploader'"

"Can't bind to 'uploader' since it isn't a known property of 'input'"

这是我的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(大父级模块)中导入/更改任何内容.

and I didn't Import/change anything in AppModule(Grand Parent Module).

有人可以帮我这个忙吗?

can someone help me on this please...

推荐答案

在Angular 4中上传图片而无需插件 这可能是值得尝试的文章. 在Angular 4中上传图像而无需插件

Upload images in Angular 4 without a plugin This is the article that might be worth trying. Upload images in Angular 4 without a plugin

强调以下几点:

1. 使用.request()方法代替.post
2. 将formData直接发送到正文中.
3. 自定义标题项并构造一个新的RequestOptions 对象.
4. 要发送带有图像内容的formData，必须删除Content-Type标头.

1. Using the .request() method instead of .post
2. Sending formData straight into the body.
3. Customizing header items and constructing a new RequestOptions object.
4. In order to send formData with image content you must remove the Content-Type header.

这篇关于在Angular 4中上传文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！