Question

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

＆＃13;

<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>

＆＃13;

这是html页面的代码。

以下是html页面的控制器。

＆＃13;

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...")

		})

	}

}

＆＃13;

以下是用于完成此任务的servlet

提供Servlet

＆＃13;

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);
        }
}

＆＃13;

上传Servlet

＆＃13;

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());
		}
	}
}

＆＃13;

我需要使用html页面上传文件，这是index.jsp页面中的代码，可以正常使用这些servlet。

的index.jsp

＆＃13;

<%@ 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>

＆＃13;

任何人都可以帮我在不使用jsp的情况下使用angularjs和html完成我的代码。谢谢。

Answer 1

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">

	<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>

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

1 个答案: