如何angular2发布JSON数据和文件在相同的请求

问题描述：

我想在同一个请求中实现post文件和Json数据。下面如何angular2发布JSON数据和文件在相同的请求

是上传文件代码：

upload(url:string,file:File):Observable<{complate:number,progress?:number,data?:Object}>{ 


    return Observable.create(observer => { 
     const formData:FormData = new FormData(), 
     xhr:XMLHttpRequest = new XMLHttpRequest(); 
     formData.append('uploadfile', file); 


     formData.append("_csrf", this.tokenService.getCsrf()); 
     xhr.open('POST',url, true); 
     xhr.onreadystatechange =() => { 
     if (xhr.readyState === 4) { 
      if (xhr.status === 200) { 
      observer.next({complate:1,progress:100,data:JSON.parse(xhr.response)}); 
      observer.complete(); 
      } else { 
      observer.error(xhr.response); 
      } 
     } 
     }; 

     xhr.upload.onprogress = (event) => { 
     observer.next({complate:0,progress:Math.round(event.loaded/event.total * 100)}); 
     }; 


     const headers=new Headers(); 
     let token: string = localStorage.getItem('access-token'); 
     xhr.setRequestHeader('Authorization', `Bearer ${token}`); 
     xhr.send(formData); 
    }).share();

如何与angular2 http.post集成（URL，JSON.stringify（数据））。

angular2目前不支持http.post中的文件：https：//github.com/angular/http/issues/75，但仍然可以使用'arraybuffer'或'Blob'发送文件。此外，要实施进展，请检查以下答案：http://*.com/a/37159100/4102561 – Supamiu

使用'Blob'？有没有例子？ –

我没有示例，但它需要非常复杂的操作（从表单获取文件，从文件创建blob，将blob添加到表单等）。我认为你的解决方案是目前最好的解决方案。（只需使用基本的xhr请求）。 – Supamiu

答

所以我一直在试图做到这一点，对于看起来非常简单的事情，我最终找出了一个解决方案，很麻烦。希望有些同事帮助我，我们想出了一些合理的东西。

本文档帮了我们很多：https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects

而这里的角码：

class SomeService { 
    someMethod(fileToUpload: File, name: string, version: string) { 
    const formData: FormData = new FormData(); 
    formData.append('file', fileToUpload, fileToUpload.name); 

    const overrides = { 
     name, 
     version, 
    }; 

    const blobOverrides = new Blob([JSON.stringify(overrides)], { 
     type: 'application/json', 
    }); 

    formData.append('overrides', blobOverrides); 

    const req = new HttpRequest('POST', `some-url`, formData); 

    return this.http.request(req); 
    } 
}

正如@Supamiu表示，采用斑点是关键，下面是一个例子，如何做到这一点。

嗨@Maxime你应该如何解析后端的JSON数据？ –

对不起，布赖恩，但我没有负责，甚至没有在这家公司工作了。祝你好运 – Maxime

不用担心谢谢@Maxime的前端答案:) –

如何angular2发布JSON数据和文件在相同的请求

相关推荐