angualr2 FormData 文件上传

通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对;

同时可以实现文件的上传!

使用他的append方法就行;最值得注意的是在angualr2中千万别写请求格式!!

1、文件获取

<input id="saveFile" type="file" multiple="true" name="file"  class="form-control"
 (change)="fileChange($event,txDetailFm.controls['file'])" placeholder="上传文件" required>

2、angular2方法获取到文件 uploadFile 自己定义的变量File类型就行

 fileChange( event: any, ele: FormControl ) {
         this.uploadFile = event.target.files[0] ;}

3、单机上传的方法

saveFile() {
        const formData = new FormData();
        formData.append('file', this.uploadFile );
        formData.append('test', 'test' );
        console.log(formData.get('file'));
        let myHeaders: Headers;
        myHeaders = this.httpConstants.headers;
//  不要      myHeaders.append( 'Content-Type', 'multipart/form-data;' );
        const req = new Request( {
            method: RequestMethod.Post,
            url: this.httpConstants.uploadFile,
            headers: myHeaders,
            body:  formData
        } );
        this.httpUtil.send4Ob( req ).subscribe(( res: Response ) => {

        } );
    }

4、springmvc controller

@RequestMapping(value = "uploadFile", method = { RequestMethod.POST })
public void uploadFile(MultipartHttpServletRequest req, HttpServletResponse res,MultipartFile file, String test) {
logger.info(Thread.currentThread().getStackTrace()[1].getMethodName());

}




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值