Javascript 我正在尝试使用FetchAPI和formData-AngleMaterial上传一个文件

我正在尝试上载图像并将formData发送到后端

我使用formData.append来附加上传的文件，使用fetchAPI来发送formData

我的输入如下所示

<input style="display:none" type="file"
                               (change)="fileChange($event)"
                               #fileInput>

当我点击服务时，我得到状态代码：422不可处理实体，响应如下

{“error”：{“message”：？exception.illegalargument？”}

请求有效负载如下所示

------WebKitFormBoundary8E02ll3T0mo433bu
Content-Disposition: form-data; name="uploadFile"; filename="Screen Shot 2019-10-04 at 10.49.34 AM.png"
Content-Type: image/png


------WebKitFormBoundary8E02ll3T0mo433bu--

---

请帮助我如何让这个工作

我通过执行以下操作使其正常工作：

删除了标题并检查服务器是否需要上载文件

工作代码如下：

  fileChange(event) {
    let fileList: FileList = event.target.files;
    if (fileList.length > 0) {
      let file: File = fileList[0];
      let formData: FormData = new FormData();
      formData.append('uploadedFile', file, file.name);
      this.handleUpload(formData);
    }
  }

  handleUpload(formData) {
    const url = `/upload?`;
    let result;
    const req = new Request(url,
      {
        method: 'POST',
        headers: {},
        body: formData
      });
    fetch(req)
      .then(response => response.text())
      .then(() => {
        if (result.data) {
          console.log('response data ', result.data);
        } else {
          console.log('request failed');
        }
      })
      .catch(() => console.log('Can\'t access ' + url + ' response. Blocked by browser?'));
  }

---

当我不添加任何标题时，它就起作用了

 handleUpload(formData) {
     const url = `/upload`;
     const proxyurl = 'https://cors-anywhere-proxy.herokuapp.com/';
     let result;
     const req = new Request(proxyurl + url,
       {
         method: 'POST',
         headers: {},
         body: formData
       });
     fetch(req)
       .then(response => response.text())
       .then(() => {
         if (result.data) {
           console.log('result.data', result.data);
         } else {
           console.log('request failed');
         }
       })
       .catch(() => console.log('Can\'t access ' + url + ' response. Blocked by browser?'));
   }

---

为什么要设置自己的标题？只是让浏览器完成它的工作。删除标题对我没有任何帮助。当您不设置自己的标题时，请求负载是什么？uploadFile：（二进制），当我点击查看源时，它显示如下------WebKitFormBoundaryqs0xw88pK72KS9wy内容配置：表单数据；name=“uploadFile”；filename=“屏幕截图2019-11-07:12.49.12 PM.png”内容类型：image/png------WebKitFormBoundaryqs0xw88pK72KS9wy--您的意思是没有发送数据？您没有

�巴布亚新几内亚� �字符串在那里？您的文件的
大小是多少？另外，您确定您的服务器正在等待post字段
上载文件
？
  fileChange(event) {
    let fileList: FileList = event.target.files;
    if (fileList.length > 0) {
      let file: File = fileList[0];
      let formData: FormData = new FormData();
      formData.append('uploadedFile', file, file.name);
      this.handleUpload(formData);
    }
  }

  handleUpload(formData) {
    const url = `/upload?`;
    let result;
    const req = new Request(url,
      {
        method: 'POST',
        headers: {},
        body: formData
      });
    fetch(req)
      .then(response => response.text())
      .then(() => {
        if (result.data) {
          console.log('response data ', result.data);
        } else {
          console.log('request failed');
        }
      })
      .catch(() => console.log('Can\'t access ' + url + ' response. Blocked by browser?'));
  }

 handleUpload(formData) {
     const url = `/upload`;
     const proxyurl = 'https://cors-anywhere-proxy.herokuapp.com/';
     let result;
     const req = new Request(proxyurl + url,
       {
         method: 'POST',
         headers: {},
         body: formData
       });
     fetch(req)
       .then(response => response.text())
       .then(() => {
         if (result.data) {
           console.log('result.data', result.data);
         } else {
           console.log('request failed');
         }
       })
       .catch(() => console.log('Can\'t access ' + url + ' response. Blocked by browser?'));
   }