使用observables进行文件上传Angular 2,获取上传文件的Url

时间:2018-03-10 06:15:14

标签: node.js angular file-upload

我使用Angular 2 HTTPRequest类将图像上传到Nodejs服务器,并跟踪上传进度。上传完成后,我会返回上传文件的路径以响应POST请求。我坚持/无法捕获发布请求的返回值。我需要URL来显示刚上传的图像的缩略图。

以下代码段来自Nodejs。

router.post('/',function(req, res, next) {
var form = new formidable.IncomingForm();
var oldPath;
var newPath;
form.parse(req, function(err, fields, files) {

    for(var file in files) {
        if(!files.hasOwnProperty(file)) {
            continue;
        }

        oldPath = files[file].path;
        newPath = './uploadedFiles/' + files[file].name;
        fs.renameSync(oldPath, newPath);           
    }
    res.json(newPath);
    res.end();
});
module.exports = router;

以下代码段来自客户端的Angular 2.

uploadFiles(f, progressUpdate) {
    this.files = f;
    let req: any;
    const data = new FormData();
    for (let i = 0; i < this.files.length; i++) {
        data.append('file' + i, this.files[i], this.files[i].name);
    }
    req = new HttpRequest('POST', 'api/upload', data, {
        reportProgress: true
    });
// The `HttpClient.request` API produces a raw event stream
// which includes start (sent), progress, and response events.
return this.http.request(req).pipe(
  map(event => this.getEventMessage(event, this.files[0])),
  tap(message => progressUpdate(message)),
  last()
);
}

1 个答案:

答案 0 :(得分:0)

好的,所以我自己想出来......有一个被称为EventType.Response的HttpEvent。这有一个事件对象,其中一个body属性包含我从服务器返回的响应...我的坏......