如何将上传的文件和 json 数据发布到 Angular2 中的 API？

Question

所以，我必须将一个（或多个）文件与其他 json 数据一起发送。

从我的搜索来看，我只能单独发送文件或将它们转换为base64，然后将带有base64代码的json发送到API（未确认）。

是否有另一种方法可以发送不将文件转换为 base64 的文件？

我们已经遇到了 base64 和图像的问题，由于 base64 字符串的长度，我们的 GET 需要花费一生的时间才能加载。

编辑：所以，我只是尝试将它作为 base64 发送并且它有效，所以它有效，我只是想避免以这种方式发送它。

Answer 1

您需要以这样的形式添加图像数据。

<form (submit)="submit(formData)" #formData="ngForm">
  <div class="form-group">
    <label for="name">Product Name:</label><input type='text' name='name' class="form-control" id="name" ngModel>
  </div>
<div class="form-group">
    <label for="image">Image:</label><input type="file" name='image' class="form-control" id="image" ngModel>
  </div>

<button type="submit" class="btn btn-default">Add</button>
</form> 

组件

submit(formData){
    let inputEl: HTMLInputElement = this.el.nativeElement.querySelector('#image');   
           let fileCount: number = inputEl.files.length;   
            let formData = new FormData();  
            if (fileCount > 0) {
                    formData.append('image', inputEl.files.item(0));
             }

// Now call your service.

    }

这是伪代码，但您可以在表单数据中添加图像并发送到后端。 否则您可以发出两个发布请求，一个用于表单数据，另一个用于图像。