Angular 4. 文件上传答案

【问题标题】：Angular 4. File uploadAngular 4. 文件上传
【发布时间】：2017-11-09 02:18:38
【问题描述】：

我使用 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', file[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);
}

我也有同样的结果。在 chrome 控制台中，我看到： Content-Type:multipart/form-data;边界=----WebKitFormBoundarycE8MNSpWUCwCDLLB

当我从 Postman（chrome 扩展）发送数据时，我得到了成功的结果。 Debug in Java Debug in chrome

【问题讨论】：

那么您的卡住或问题是什么？
请澄清您的问题。

标签： angular file-upload

【解决方案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>

角码：

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

注意：在方法中，您必须为 this 运算符定义一个局部变量才能在函数中使用它。在 imageSrc 中，你有文件的 base64 字节数组。

【讨论】：