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

【问题标题】：How to upload a file to blobstore using angularjs?如何使用 angularjs 将文件上传到 blobstore？
【发布时间】：2015-04-02 05:15:14
【问题描述】：

我正在为我的项目创建一个音频文件上传系统。在这种情况下，我使用的是 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页面的控制器。

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>

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

【问题讨论】：

标签： html angularjs servlets blobstore

【解决方案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>

【讨论】：

非常感谢您的代码，我是 Angular 新手，非常感谢您的帮助。我不能给出积极的反馈，因为系统不会让我因为我是新人。非常感谢。 :) :) :)
我了解反馈 - 我也是新手，仍在尝试弄清楚该网站的运作方式。很高兴我能帮上忙！