我正在为我的项目创建一个音频文件上传系统。在本例中，我使用 angularjs 应用程序，也使用 html。我已经使用谷歌应用程序引擎编写了我的应用程序的后端。在本例中，我发现的问题是我遵循了 google blobstore api，并使用 jsp 页面进行了文件上传。但我想通过 html 页面来完成它。问题是jsp中有一段java代码调用了blobstore api中的createUploadUrl方法。但在 html 页面中我无法做到这一点。我尝试使用 angularjs 按以下方式执行此操作。
<div class="container">
<h1>Audio Upload</h1>
<form method="post" enctype="multipart/form-data">
<input type="text" name="foo" ng-model="audio.foo"/>
<input type="file" name="myFile" ng-model="audio.myFile"/>
<input type="submit" value="Submit" ng-click="upload(audio)"/>
</form>
</div>这是 html 页面的代码。
下面是 html 页面的 Controller 。
function AudioUpload( $http,$filter, $timeout, $scope, $location, $rootScope) {
console.log("=========================");
console.log("Audio Upload Controller...");
$scope.upload = function(audio) {
$('.line-loader').show();
$http({
url : '/upload',
method : "POST",
//data : $.param(audio),
headers : {
'Content-Type' : 'audio/mp3; charset=UTF-8'
}
}).success(function(data) {
console.log(audio.myFile+"Audio Successfully Uploaded...")
})
}
}这里是用于完成此任务的 servlet
服务 Servlet
package xxx.xxxx.fileupload;
import java.io.IOException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.appengine.api.blobstore.BlobKey;
import com.google.appengine.api.blobstore.BlobstoreService;
import com.google.appengine.api.blobstore.BlobstoreServiceFactory;
public class Serve extends HttpServlet {
private BlobstoreService blobstoreService = BlobstoreServiceFactory.getBlobstoreService();
@Override
public void doGet(HttpServletRequest req, HttpServletResponse res)
throws IOException {
BlobKey blobKey = new BlobKey(req.getParameter("blob-key"));
blobstoreService.serve(blobKey, res);
}
}上传 Servlet
package xxx.xxxxx.fileupload;
import java.io.IOException;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.appengine.api.blobstore.BlobKey;
import com.google.appengine.api.blobstore.BlobstoreService;
import com.google.appengine.api.blobstore.BlobstoreServiceFactory;
public class Upload extends HttpServlet {
private BlobstoreService blobstoreService = BlobstoreServiceFactory
.getBlobstoreService();
@Override
public void doPost(HttpServletRequest req, HttpServletResponse res)
throws ServletException, IOException {
Map<String, List<BlobKey>> blobs = blobstoreService.getUploads(req);
List<BlobKey> blobKeys = blobs.get("myFile");
if (blobKeys == null || blobKeys.isEmpty()) {
res.sendRedirect("/");
} else {
res.sendRedirect("/serve?blob-key="
+ blobKeys.get(0).getKeyString());
}
}
}我需要使用 html 页面上传文件，这是 index.jsp 页面中的代码，它可以与这些 servlet 一起正常工作。
Index.jsp
<%@ page import="com.google.appengine.api.blobstore.BlobstoreServiceFactory" %>
<%@ page import="com.google.appengine.api.blobstore.BlobstoreService" %>
<%
BlobstoreService blobstoreService = BlobstoreServiceFactory.getBlobstoreService();
%>
<html>
<head>
<meta http-equiv="Content-Type" content="audio/mp3; charset=ISO-8859-1">
<title>Upload Test</title>
</head>
<body>
<form action="<%= blobstoreService.createUploadUrl("/upload1") %>" method="post" enctype="multipart/form-data">
<input type="text" name="foo">
<input type="file" name="myFile">
<input type="submit" value="Submit">
</form>
</body>
</html>任何人都可以帮助我使用 angularjs 和 html 而不使用 jsp 来完成我的代码吗？谢谢。
最佳答案
Angular 尚不支持文件输入，因此您需要一个指令来从输入中获取文件。该文件可以分配给 Controller ，然后您可以从那里使用 $http 进行上传。
(function(){
angular.module('app',[]);
angular.module('app')
.controller('FileCtrl', FileCtrl)
.directive('fileDirective', fileDirective);
function FileCtrl(){
var vm = this;
vm.myFile;
vm.upload = function(){
// upload stuff goes here
}
}
fileDirective.$inject = ['$log'];
function fileDirective($log){
var directive = {
restrict: 'A',
link: link,
scope: {
fileDirective: '=fileDirective',
file: '=name'
}
}
return directive;
function link(scope, element, attrs, controller){
$log.debug(scope);
element.bind('change', function(){
var fileSelected = element[0].files[0];
$log.debug(fileSelected);
scope.$apply(function () {
scope.file = fileSelected;
$log.debug(scope.file);
});
});
}
}
})()<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" class="container" ng-controller="FileCtrl as audio">
<h1>Audio Upload</h1>
<form method="post" enctype="multipart/form-data">
<input type="text" name="foo" ng-model="audio.foo"/>
<input type="file" name="audio.myFile" file-Directive="audio.myFile"/>
<input type="submit" value="Submit" ng-click="audio.upload(audio)"/>
</form>
<p>Your file name is: {{audio.myFile.name}}</p>
</div>关于html - 如何使用 angularjs 将文件上传到 blobstore？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29405428/