在 angular 2 中上传和下载文件？

Question

我正在使用 Angular2、TypeScript 将文件连同 JSON 数据发送到服务器。

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 不允许请求 header 字段 enctype。

Answer 1

您需要更新服务器上的设置，以允许来自您的 Angular 代码运行所在域的 AJAX 请求。如果您的 Angular 应用程序已在某处发布，则这可能是 localhost 或其他域。如何更改 CORS 设置的细节取决于您的服务器端堆栈，但是这个 SO 答案显示了一般修复：

在 angular 2 中上传和下载文件？

upload and download of file in angular 2?

sails.js

angular

Html代码

app.component.ts.