Ionic framework 未在服务器ionic3中上载文件

我有一个场景，我正在使用ionic将图像文件从本地驱动器（键入jpeg或png）上载到API端点。下面是我的代码：

fileupload.html-->

provider.ts-->

我已经解决了CORS问题，同样的问题也没有

当我使用postman发送相同的响应时，它会成功，这就是我在postman中发送的响应

Form-data 
key - "file" (type file) value - "/path/to/my/file"

Headers
Content-type - application/json
x-attlassian token - no-check

---

有人能告诉我这里出了什么问题。

您必须将内容类型从

application/json

更改为

multipart/form data

。您发送的是图像，而不是json文件。

最好的方法是将图像编码到base64并发送。一切都取决于服务器需要什么

或者你可以试试这个

const body = file;

    const headers = new Headers({'Content-Type': 'image/jpg'});
    return this.http.post(this.api+'/issue/'+key+'/attachments, body, {headers: headers}). ...

---

使用

FormData

上传文件

fileupload.ts

    changeListener(event) {

      const fd = new FormData();
      this.file = event.target.files[0];
      fd.append('file', this.file, this.file.name);
      this.jira.postAttachment("PM-3",fd)
        .subscribe(data => {

          console.log(data);
    });
  }

  postAttachment(key, fd): Observable<any> {

  const httpOptions = {
    headers: new HttpHeaders(
      { 'Content-Type': 'multipart/form-data' },
      { 'Authorization': `Basic ${this.auth.getAuthString()}` })
      };
  return this.http.post(this.api+'/issue/'+key+'/attachments', fd, httpOptions);

  }

provider.ts

    changeListener(event) {

      const fd = new FormData();
      this.file = event.target.files[0];
      fd.append('file', this.file, this.file.name);
      this.jira.postAttachment("PM-3",fd)
        .subscribe(data => {

          console.log(data);
    });
  }

  postAttachment(key, fd): Observable<any> {

  const httpOptions = {
    headers: new HttpHeaders(
      { 'Content-Type': 'multipart/form-data' },
      { 'Authorization': `Basic ${this.auth.getAuthString()}` })
      };
  return this.http.post(this.api+'/issue/'+key+'/attachments', fd, httpOptions);

  }

postAttachment（键，fd）：可观察{
常量httpOptions={
标题：新的HttpHeaders(
{“内容类型”：“多部分/表单数据”}，
{'Authorization'：`Basic${this.auth.getAuthString（）}`}）
};
返回this.http.post（this.api+'/issue/'+key+'/attachments'，fd，httpOptions）；
}

关于AngularJS的一个问题，最终的效果是什么（类似的一个方法也可能对您有所帮助）：

• 创建一个隐藏的输入反类型文件

• 在changeListener函数中设置它的值

• 之后再从那里发送文件
  • 原因是文件输入的某些内置属性让我们将其值识别为file/Blob，而不是许多“复杂”组件使用的路径
• 如前所述，也将其作为多部分文件发送

---

为什么在http调用中对文件使用JSON.strigify？是的，那是在我以应用程序/JSON的形式发送请求时，后来我尝试使用multipart/form-dataencoding将图像编码到base-64时将其删除了。但是我担心的是，如果图片的分辨率很高，那么base64字符串也会太长，同时使用第二个选项您提到的内容类型image/jpeg的格式无效，所以我切换到multipart/formdatahumm。如果您不能使用base64，也许您应该使用FileTransfer。文件传输已被弃用。我尝试了您的答案，但仍然收到500个内部服务器错误，因为无法POST500内部服务器错误与后端关联。您必须从后端修复它。我如何修复它？有什么建议吗？这样我就可以检查并验证您的回答您使用哪个框架作为后端。它是

express

？它不是express JIRA软件是一个在tomcat上运行的Web应用程序

    changeListener(event) {

      const fd = new FormData();
      this.file = event.target.files[0];
      fd.append('file', this.file, this.file.name);
      this.jira.postAttachment("PM-3",fd)
        .subscribe(data => {

          console.log(data);
    });
  }

  postAttachment(key, fd): Observable<any> {

  const httpOptions = {
    headers: new HttpHeaders(
      { 'Content-Type': 'multipart/form-data' },
      { 'Authorization': `Basic ${this.auth.getAuthString()}` })
      };
  return this.http.post(this.api+'/issue/'+key+'/attachments', fd, httpOptions);

  }