文件未在服务器 ionic3 中上传

Posted 2023-03-13

【中文标题】文件未在服务器 ionic3 中上传

【英文标题】：File not uploading in server ionic3

【发布时间】：2019-02-28 17:48:52

【问题描述】：

我有一个场景，我使用 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 问题，同样没有问题。

当我使用邮递员发送相同的响应时，它成功了，这就是我在邮递员中发送的内容。

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

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

有人可以建议这里出了什么问题。

【参考方案1】：

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

【讨论】：

为什么在http调用中对文件使用JSON.strigify？

是的，那是我将请求作为 application/json 发送的时候，后来我在尝试使用 multipart/form-data 时删除了它

【参考方案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). ...

【讨论】：

将我的图像编码为base-64很好，但我担心的是如果图片的分辨率很高，那么base64字符串会太长

另外使用您提到的第二个选项表示 Content-type image/jpeg 格式无效，因此我切换到 multipart/form-data

嗯。如果你不能使用 base64，也许你应该使用 Filestransfert ionicframework.com/docs/native/file-transfer

文件传输已被弃用

【参考方案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);

  

【讨论】：

我试过你的答案，但我仍然收到 500 内部服务器错误，因为无法 POST

500 内部服务器错误与后端相关联。你必须从后端修复它。

我该如何解决这个问题？有什么建议 ？以便我检查并验证您的答案

您使用哪个框架作为后端。是express吗？

它并不表示JIRA软件是一个运行在tomcat上的webapp

【参考方案4】：

对于 AngularJS 的一个问题，最终的工作是（可能类似的方法也可以帮助你）：

制作一个隐藏的输入de类型文件

在changeListener函数中设置它的值

之后从那里发送文件

文件输入的一些内置属性让我们将其值识别为 File/Blob 而不是许多“复杂”组件使用的路径。

如前所述，也将其作为多部分文件发送。