Angular/NodeJS:无法将图像上传到 AWS
Angular/NodeJS: Unable to upload image to AWS
我有一个Node/Express应用程序,并试图从Angular/Ionic前端检索文件信息以上传。我在 Angular 上创建了一个单独的服务来获取有效的图像名称。我真正的问题是获取文件本身并将其从 Angular 上传到服务器。如何获取图像文件以从 Angular 前端上传?
下面是我的代码:
<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>
控制器 JS 文件
.controller('ProfileUpdateCtrl', function($http, $state, $http, $cordovaOauth, $stateParams, $rootScope, $scope, UserFac, UploadFac) {
id = $stateParams.id;
$scope.user = {};
UserFac.getUser(id).success(function(data) {
$scope.users = data;
});
$scope.editprofile = function(user) {
username = user.username;
password = user.password;
firstname = user.firstname;
lastname = user.lastname;
birthday = user.birthday;
hometown = user.hometown;
email = user.email;
mark = { hometown: hometown, username: username, password:password, email:email, firstname:firstname, lastname:lastname,birthday:birthday };
setmark = angular.toJson(mark);
UserFac.updateUser(id, setmark);
//reload to current controller
$state.reload({'reload':true});
}
//Remove Profile Image from Database.
$scope.removepropic = function(user) {
blank = [];
mark = { imageurl:blank };
setmark = angular.toJson(mark);
UserFac.updateUser(id, setmark);
}
//Image Uploading
$scope.stepsModel = [];
$scope.imageUpload = function(element) {
var reader = new FileReader();
reader.readAsDataURL(element.files[0]);
file = element.files[0];
mark = { imageurl:element.files[0].name };
setmark = angular.toJson(mark);
//upload image to AWS
UploadFac.sendImg(file);
//send information to database
UserFac.updateUser(id, setmark);
console.log(element.files[0]);
}
//Terminate Profile
$scope.deleteprofile = function() {
UserFac.deleteUser(id);
$state.go('home');
}
})
这是一个伟大而简单的解决方案,用于将文件上传到服务器或直接从浏览器上传到 S3。 在后一种情况下,您可以使用服务器将您从 AWS 请求的令牌传递给您的用户,以授予他们上传的临时权限。
http://fineuploader.com/
您可以快速将他们的 UI 集成到您的网站中,或创建自定义 UI。它功能强大,具有许多内置功能以及良好的文档。 通过使用 Amazon S3 功能直接从浏览器上传,您可以消除服务器在上传期间处理文件的大量开销。
我正在使用 REST API 在 AWS 中使用图像上传 查看服务器端视图中的代码
和客户端视图显示客户端
相关文章:
- 如何使用url加载程序在webpack中导入多个图像
- nodejs-expressjs上传图像并显示它们
- 使用JSP从服务器检索和显示图像
- 角度:在ng重复上切换图像
- 画廊图像未显示
- Phonegap-(安卓/iphone)多个图像的图像库出现问题
- Javascript排序的图像弹出窗口..可以't单独弹出
- 画布数据到图像
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 使图像在单击时展开到不大于浏览器
- Html页面上的多个Base64图像和平滑加载
- UIAutomation放大图像
- 使用javascript在Flash中加载外部图像
- 可以在这里为背景图像设置滤镜吗
- 如何使用 Node/Angular/JavaScript 将多个图像上传到 Amazon AWS S3 存储桶
- Angular/NodeJS:无法将图像上传到 AWS
- 流星:显示来自 aws s3 的图像
- ExpressJS从AWS S3上传和显示图像
- 从AWS S3加载图像时获取响应头
- 使用cors从aws s3加载的Canvas元素和图像在前几次加载时不工作