文件未在服务器 ionic3 中上传

Question

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

fileupload.html -->

//---------------------------------------------------
  <ion-item>
    <ion-input type="file" accept="image/*" (change)="changeListener($event)"> </ion-input>
  </ion-item>

fileupload.ts -->

changeListener($event):void{
    this.file=$event.target.files[0];
    console.log(this.file);
    console.log("upload...");
    let regData={"file":this.file};
    console.log("REGDATAA"+JSON.stringify(regData));
    this.jira.postAttachment("PM-3",regData).subscribe(dataa=>{
      console.log(dataa);
    });
  }

provider.ts -->

public postAttachment(key,data):Observable<any>{
    console.log(JSON.stringify(data))
    return this.http.post(this.api+'/issue/'+key+'/attachments',JSON.stringify(data),{
      headers: new HttpHeaders()
        .append('Authorization', `Basic ${this.auth.getAuthString()}`)
        .append('Content-Type','multipart/form-data';boundary="-------xe3rtyhrfds")
        .append("X-Atlassian-Token", "no-check")
        .append("User-Agent", "xx")
    });
  }

每次我发送文件时它都不采用路径并发送一个空的响应，这是下面的错误。

 //----------------------------------------------------
  [object File]: {lastModifiedDate: [date] Fri Sep 21 2018 17:42:46 GMT+0530 (India Standard Time), name: "download.jpg", size: 5056, type: "image/jpeg", webkitRelativePath: ""}

 upload...
ion-dev.js (157,11)

 REGDATAA{"file":{}}
ion-dev.js (157,11)

 {"file":{}}
ion-dev.js (157,11)

ERROR [object Object]

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

当我使用 postman 发送相同的响应时，它成功了，这里是我在 Postman 中发送的内容。

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

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

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

Answer 1

您必须将内容类型从 application/json 更改为 multipart/form-data。您发送的是图像，而不是 json 文件。

Answer 2

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

或者你可以试试这个。

const body = file;

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

Answer 3

使用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);
    });
  }

provider.ts

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

  }

Answer 4

对于 AngularJS 上的一个问题，最终解决的问题是（类似的方法也可能对您有帮助）：

创建一个隐藏的输入类型文件
在 changeListener 函数中设置它的值
之后从那里发送文件
- 由于文件输入的某些内置属性，我们将其值识别为 File/Blob 而不是许多 "complex" 组件使用的路径。
也如前所述将其作为多部分文件发送。

文件未在服务器 ionic3 中上传

File not uploading in server ionic3

jira-rest-api

ionic-framework

ionic-view

ionic-native

ionic3