Question

我有一个Node / Express应用程序并尝试从Angular / Ionic前端检索文件信息以进行上传。我在Angular上创建了一个单独的Service来获取有效的Image名称。我真正的问题是获取文件本身并将其从Angular上传到服务器。如何从Angular前端获取要上传的图像文件？

以下是我的代码：

def route_params
  params.require(:route).permit(
      :start_lat, 
      :start_long, 
      :end_lat, 
      :end_long,
      :flag_opt
   )
end

控制器JS文件

<div class="item-input"> 
 <!--list item-->  
 <div data-ng-repeat="user in users"> 

    Username: <input type="text" placeholder="Enter the event name" name="username" ng-model="user.username" required> 

    Password: <input type="password" placeholder="Enter the password" name="password" ng-model="user.password" required> 

    <!--more items that I will omit from this--> 
    Profile Image: 
    <div ng-if="user.imageurl">
       {{ user.imageurl }}
       <button class="button button-block button-positive" ng-click="removepropic()">Remove Image
       </button>d
      <div ng-repeat="step in stepsModel">
         <img class="thumb" ng-src="{{ step }}" style="width:100px; height:100px" />
      </div>

      <input type="file" ng-model-instant onchange="angular.element(this).scope().imageUpload(this)" /> 
    </div> 

    <button class="button button-block button-positive" ng-click="editprofile(user)">
     Edit Account
    </button>

    <button class="button button-block button-positive" ng-click="deleteprofile()">
     Delete Account
    </button>

 </div>

Answer 1

这是一个非常简单的解决方案，用于将文件上传到服务器或直接从浏览器上传到S3。在后一种情况下，您可以使用服务器将您从AWS请求的令牌传递给您的用户，以便为他们提供上载的临时权限。

http://fineuploader.com/

您可以快速将其UI集成到您的网站中，或创建自定义用户界面。它功能强大，具有许多内置功能和良好的文档。通过使用Amazon S3功能直接从浏览器上传，您可以消除服务器在上传过程中处理文件的大量开销。

Answer 2

我正在使用 REST API 在 AWS 中使用图片上传查看服务器端的代码view

和客户端视图show client side

Angular / NodeJS：无法将图像上传到AWS

2 个答案: