Angular 4.文件上传

Question

我使用Angular 4，并且我有这个代码。

uploadPhoto(file: File):Promise<any> { 
    var formData = new FormData(); 
    formData.append('req', file); 
    return this.http.post(`${this.urlApi}/uploadphoto`, formData, { 
    withCredentials: false, 
    body: formData, 
    }) 
    .toPromise() 
    .catch(this.handleError); } 

然后我在Java Spring上调试我的程序。我在调试面板只有参数“req”，但不是多部分文件。我设置标题“multipart/form-data”和“undefined”。我设置“formData.append（ 'REQ'，文件[0]）; 另外，我用这个代码：

uploadPhoto2(file:File){ 
    var formData = new FormData(); 
    formData.append('file', file); 
    var request = new XMLHttpRequest(); 
    request.open('POST', `${this.urlApi}/uploadphoto`); 
    request.send(formData); 
} 

我有相同的结果。在铬的控制台I看到：内容类型：多/格式数据;边界= ---- WebKitFormBoundarycE8MNSpWUCwCDLLB

当我从邮递员（铬exstension）我有succesfull结果发送数据 Debug in Java Debug in chrome

Answer 1

此代码工作对我非常好：

。

HTML代码（这是图像）

<div class="form-group"> 
<label for="usr">Upload your new photo(Optional):</label> <input type="file" accept=".jpg,.png,.jpeg" (change)="attachFile($event)"> 
<br> 
<img src="{{imageSrc}} | defaultPipe " height="250" weight="250" alt="Image preview..." /> 
</div> 

ANGULAR CODE：

attachFile(event) : void { 
    var reader = new FileReader(); 
    let _self = this; 

    reader.onload = function(e) { 
     _self.imageSrc = reader.result; 
     console.log(_self.imageSrc); 
    }; 
    reader.readAsDataURL(event.target.files[0]); 
    } 

注：在方法，你必须定义一个局部变量这运营商的功能来使用它。在imageSrc中你有base64字节的文件数组。