使用 observables Angular 2 上传文件，获取上传文件的 Url答案

【问题标题】：File Upload using observables Angular 2, Get Url of the uploaded file使用 observables Angular 2 上传文件，获取上传文件的 Url
【发布时间】：2023-03-11 06:40:02
【问题描述】：

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

下面的 sn-p 来自 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;

下面的 sn-p 来自客户端的 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()
);
}

【问题讨论】：

您是将文件保存在数据库中还是目录中？我们能看到那部分代码吗？
我将它保存到服务器上的一个文件夹中。
所以使用回调或者promise来等待文件保存完成，标准化文件名，返回预定义的路径。你能让你的那部分代码可用吗？
特别是我正在努力处理客户端代码。如何获取服务器返回的值？

标签： node.js angular file-upload

【解决方案1】：

好吧，我自己想通了...有一个被称为 EventType.Response 的 HttpEvent 被触发。这有一个事件对象，其中 body 属性包含我从服务器返回的响应...我的错...

【讨论】：