如何使用angularjs上传文件到blobstore ?

I am creating a audio file uploading system for my project. In this case I am using angularjs app and I use html too. I have written the back end of my application using the google app engine. In this case the problem I found was I followed the google blobstore api and I did the file uploading using a jsp page. But I want to get it done by and html page. And the problem is that there is a java code in the jsp which makes a call to createUploadUrl method in the blobstore api. But in a html page I cannot do it. I tried to do it in the following way using angularjs.

我正在为我的项目创建一个音频文件上传系统。在本例中，我使用的是angularjs应用程序，我也使用html。我已经使用谷歌应用程序引擎编写了应用程序的后端。在本例中，我发现的问题是我遵循谷歌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>

here is the code for the html page.

这是html页面的代码。

And the following is the controller for the html page.

下面是html页面的控制器。

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

		})

	}

}

And here are the servlets that are being used to get this task done

这里是用于完成此任务的servlet

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

Upload Servlet

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

I need to get upload the file using an html page and this is the code that is in the index.jsp page which works fine with these servlets.

我需要使用html页面上传文件，这是索引中的代码。jsp页面使用这些servlet很好。

Index.jsp

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>

Can anybody please help me to complete my code using angularjs and html without using jsp. Thank you.

谁能帮我在不使用jsp的情况下使用angularjs和html完成我的代码吗?谢谢你！

1 个解决方案

#1

Angular doesn't yet support file inputs yet, so you need a directive to get the file from the input. The file can be assigned to the controller, then you can conduct the upload with $http from there.

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