Question

我试图发送带有离子2的帖子的文件

为了询问该文件，我使用了一个不可见的输入类型文件

<input type="file" accept="image/*;" #file id="fileUpoload"  style="display: none">

按钮以这种方式调用函数：

(click)="onFileUpoloadButtonPressed(file)"

这是一个名为：

的函数

onFileUpoloadButtonPressed(element){
document.getElementById("fileUpoload").onchange = function(e : any){

  let file = {
    name: e.srcElement.files[0].name,
    file: e.srcElement.files[0],
  };



  //I get the id of the user since i have to perform an edit call to my api
  this.storage.get("userLogged").then((value) => {

    setTimeout(function(){
      this.postChangeAvatar(this, parseInt(value.data.utenti_id), file,
        function (ext, result){ //Success callback
          console.log(result);

        },
        function(ext, error){   //Error callback
          console.log(error);
          alert(error);
        }
      )
    }, 100)

  })

}
element.click();

}

这是执行发布请求的postChangeAvatar函数：

postChangeAvatar(ext, id, file, successCallback, errorCallback){
let formData : any = new FormData();
let xhr : any = new XMLHttpRequest();
console.log(id);
console.log(file); //File is successfully get

formData.append('user_photo', file.file, file.name);


for (var pair of formData.entries()) { //This is showing nothing
    console.log(pair[0]+ ', ' + pair[1]);
}

xhr.onreadystatechange = () => {
  if (xhr.readyState == 4){
    if (xhr.status == 200){
      successCallback(ext, xhr.response);
    }
    else {
      errorCallback(ext, xhr.response);
    }
  }
}
xhr.open('POST', "http://xxxxxxxxxx/api/edit/utenti/" + id, true);
xhr.send(formData);

}

发布了帖子，但是在附加文件后，formData保持为空，尝试打印formdata，并且每个都没有显示任何内容，所以唯一不对的是当执行发布时formData为空

正如你所看到的，我试图将整个请求封装在一个setTimeout中以确保获得该文件，该文件在那里，但在formData中不是appendend

从服务器我可以看到请求的正文为空我在另一个项目中尝试了这种方法，并且在那里成功运作，所以我有点惊讶看到它不起作用

如果我无法正常工作，可能还有另一种方法可以使用离子2发布所选文件吗？

Answer 1

这是一段代码（base64文件上传）。尝试设置标题。将enctype添加到Access-Control-Expose-Headers以阻止CORS。

 insertPost(data): Observable<any> {
    let headers = new Headers({ "enctype": "multipart/form-data" });
    data.userId = this.globalProvider.userId;
    var form_data = new FormData();
    for (var key in data) {
      form_data.append(key, data[key]);
    }
    return this.http.post(`${baseURL}insertPost`, form_data, { headers: headers })
      .map((response: Response) => {
        return response.json();
      })
      .catch(this.handleError);
  }

附加文件

1 个答案: