附加文件

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