【问题标题】:How to create uploads folder in angular 2 app?如何在 Angular 2 应用程序中创建上传文件夹?
【发布时间】:2017-01-03 12:02:07
【问题描述】:

我正在使用 angular2 构建一个应用程序,并且我想在我的应用程序的根目录中保留一个名为“uploads”的文件夹。但是,由于在角度当前根是“src”,它不允许我访问上传文件夹中的图像。

如果我尝试将“上传”目录保留在 src 文件夹中,那么每次我将文件上传到它时,它都会重新构建应用程序并刷新页面。我希望将其保存在这样的地方,以防万一发生文件上传,Angular cli 不会刷新应用程序。

我想在 angular2 应用程序中访问如下网址:http://localhost:4200/uploads/xyz.jpg

谢谢

【问题讨论】:

    标签: node.js angular


    【解决方案1】:

    Angular 应用是一个前端应用。它不打算用作文件存储。文件存储应由后端应用程序完成,该后端应用程序将上传的文件提供给前端应用程序。

    使用前端

    Angular-cli 不会编译 app 或 assets 之外的任何文件夹,因此,您需要将文件夹放在 app 或 assets 中。 要直接访问,请放入 assets 并像 localhost:4200/assets/uploads/xyz.jpg 一样访问。

    请记住,您需要小心,因为如果您使用 git 版本控制系统,当您拉入生产环境时,assets/uploads 中上传的每个文件都将被新版本覆盖。

    使用您的后端

    将上传文件放在 Angular 应用程序之外,这样当您构建或更新 Angular 应用程序时,什么都不会丢失。并使用后端来提供文件。

    您应该将上传文件夹放在 Angular 应用程序之外,并使用您的 nodeJs 应用程序提供它。使用 expressJs 的静态功能在 localhost/uploads/xyz.jpg 等端点提供文件(如果您的 nodejs 在 localhost 中)。所以,你不要碰角-

    【讨论】:

    • 我明白,但是如果我尝试像 localhost:4200/uploads/xyz.jpg 一样访问它。它不起作用
    • 那是因为 :4200 是 angular-cli 用于服务 FRONT-END 应用程序的端口。 Angular-cli 不会编译 app 或 assets 之外的任何文件夹,因此,您需要将文件夹放在 app 或 assets 中。要直接访问,请放入assets 并像localhost:4200/assets/uploads/xyz.jpg 一样访问
    • 我确实尝试过这样做。现在发生的事情是......我在后端有节点js来上传文件。一旦文件从 angular2 转到 nodejs 并成功上传,由于 assets 文件夹中发生了修改,angularcli 会自动开始重新编译。我不希望它重新编译应用程序只是因为在资产文件夹中上传了一张图片..
    • 正如我所说,Angular-cli 是您的前端应用程序。您应该将上传文件夹放在 Angular 应用程序之外,并使用您的 nodeJs 应用程序提供服务。使用expressJs 的静态功能在localhost/uploads/xyz.jpg 之类的端点中提供您的文件(如果您的nodejs 在localhost 中)。所以,你不要碰 angular-cli 文件夹。
    • localhost 如果我在我的电脑中设置了 php 将运行。我要将应用程序上传到heroku。在那种情况下'www.xyz.com/uploads/xyz.jpg'..它会运行吗?它可以获取文件吗?
    猜你喜欢
    • 2019-10-16
    • 1970-01-01
    • 2017-05-16
    • 2016-08-01
    • 1970-01-01
    • 2011-12-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多