如何使用angularjs将文件上传到blobstore？

我正在为我的项目创建一个音频文件上传系统。在这种情况下，我使用的是angularjs应用程序，我也使用html。我使用谷歌应用程序引擎编写了我的应用程序的后端。在这种情况下，我发现的问题是我跟着谷歌blobstore api，并使用jsp页面上传文件。但我想通过和html页面来完成它。问题是在jsp中有一个java代码，它在blobstore api中调用createUploadUrl方法。但在html页面中，我无法做到。我试图用以下方式使用angularjs来完成它。如何使用angularjs将文件上传到blobstore？

<div class="container"> 
 

 
\t <h1>Audio Upload</h1> 
 

 
\t <form method="post" enctype="multipart/form-data"> 
 

 
\t \t <input type="text" name="foo" ng-model="audio.foo"/> 
 
\t \t <input type="file" name="myFile" ng-model="audio.myFile"/> 
 
\t \t <input type="submit" value="Submit" ng-click="upload(audio)"/> 
 

 
\t </form> 
 

 
</div>

这里是html页面的代码。

而以下是html页面的控制器。

function AudioUpload($http,$filter, $timeout, $scope, $location, $rootScope) { 
 

 
\t console.log("========================="); 
 
\t console.log("Audio Upload Controller..."); 
 
\t $scope.upload = function(audio) { 
 
\t \t $('.line-loader').show(); 
 
\t \t $http({ 
 
\t \t \t url : '/upload', 
 
\t \t \t method : "POST", 
 
\t \t \t //data : $.param(audio), 
 
\t \t \t headers : { 
 
\t \t \t \t 'Content-Type' : 'audio/mp3; charset=UTF-8' 
 
\t \t \t } 
 
\t \t }).success(function(data) { 
 
\t \t \t console.log(audio.myFile+"Audio Successfully Uploaded...") 
 

 
\t \t }) 
 

 
\t } 
 

 
}

这里是正在使用得到这个任务完成

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 { 
 
\t private BlobstoreService blobstoreService = BlobstoreServiceFactory 
 
\t \t \t .getBlobstoreService(); 
 

 
\t @Override 
 
\t public void doPost(HttpServletRequest req, HttpServletResponse res) 
 
\t \t \t throws ServletException, IOException { 
 

 
\t \t 
 

 
\t \t Map<String, List<BlobKey>> blobs = blobstoreService.getUploads(req); 
 
\t \t List<BlobKey> blobKeys = blobs.get("myFile"); 
 

 
\t \t if (blobKeys == null || blobKeys.isEmpty()) { 
 
\t \t \t res.sendRedirect("/"); 
 
\t \t } else { 
 
\t \t \t res.sendRedirect("/serve?blob-key=" 
 
\t \t \t \t \t + blobKeys.get(0).getKeyString()); 
 
\t \t } 
 
\t } 
 
}

我需要使用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来完成我的代码。谢谢。

来源

2015-04-02 Vibhatha Abeykoon

Angular还不支持文件输入，所以你需要一个指令从输入中获取文件。该文件可以分配给控制器，然后你可以从那里用$ 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"> 
 

 
\t <h1>Audio Upload</h1> 
 

 
\t <form method="post" enctype="multipart/form-data"> 
 
\t \t <input type="text" name="foo" ng-model="audio.foo"/> 
 
\t \t <input type="file" name="audio.myFile" file-Directive="audio.myFile"/> 
 
\t \t <input type="submit" value="Submit" ng-click="audio.upload(audio)"/> 
 

 
\t </form> 
 
    <p>Your file name is: {{audio.myFile.name}}</p> 
 

 
</div>

来源

2015-04-02 06:18:37

感谢很多的代码，我是新来的角，我真的很感谢你的帮助。我不能把一个积极的反馈意见系统不会让我因为我是新的。并且非常感谢。 :) :) :) – 2015-04-06 05:25:35

我了解有关反馈意见 - 我也是新人，仍在努力弄清楚网站的工作原理。很高兴我能帮上忙！ – 2015-04-06 14:59:40

如何使用angularjs将文件上传到blobstore？

回答

相关问题