我正在使用Angular2，TypeScript发送一个文件，以及JSON数据到服务器。角2上传和下载文件？

HTML代码

<input type="file" class="form-control" name="avatar" id="uploadyour" name="uploadyour" #uploadyour="ngModel" [(ngModel)]="model.uploadyour" 
      (change)="fileChange($event)" placeholder="Upload file" accept=".pdf,.doc,.docx" >

app.component.ts。

import { Http, Headers, Response, Request, RequestMethod, URLSearchParams, RequestOptions } from "@angular/http"; 
import * as FileSaver from "file-saver"; 
import {Observable} from 'rxjs/Rx'; 
import { Injectable } from '@angular/core'; 

fileChange(event) { 
    let fileList: FileList = event.target.files; 
    if(fileList.length > 0) { 

     let file: File = fileList[0]; 
     let formData:FormData = new FormData(); 
     console.log(file); 
     formData.append('uploadFile', file, file.name); 
     let headers = new Headers(); 
     headers.append('enctype', 'multipart/form-data'); 
     headers.append('Accept', 'application/json'); 
     console.log(headers); 
     let options = new RequestOptions({ headers: headers }); 
     console.log(formData); 
     this.http.post("http://localhost:1337/trackstatus/upload", formData, options) 
      .map(res => res.json()) 
      .catch(error => Observable.throw(error)) 
      .subscribe(
       data => console.log('success'), 
       error => console.log(error) 

      ) 
     } 

    } 



controller.js 

upload: function (req, res) { 
    req.file('avatar').upload(function (err, files) { 
     if (err) 
     return res.serverError(err); 

     return res.json({ 

     message: files.length + ' file(s) uploaded successfully!', 

     files: files 

       }); 
      }); 



     },

我得到下面的错误。

XMLHttpRequest无法加载http://localhost:1337/trackstatus/upload。预检响应中的Access-Control-Allow-Headers不允许请求标头字段enctype。

来源

2017-04-13 phani

的【产地不受访问控制允许来源允许]可能的复制（http://stackoverflow.com/questions/10143093/origin-is-not-allowed-by-access-control-allow-origin） –

我想在app.component中添加“Access-Control-Allow-Origin” .ts或controller.js。 – phani

您需要更新服务器上的设置以允许来自运行Angular代码的域的AJAX请求。如果你的Angular应用已经发布到某个地方，这可能是localhost或者其他的域名。如何改变CORS设置的具体取决于您的服务器端栈上，但这种SO答案显示了常规的解决办法：

https://stackoverflow.com/a/10143166/571237

来源

2017-04-13 11:52:20

角2上传和下载文件？

HTML代码

app.component.ts。

回答

相关问题