javascript - Angular JS 文件上传内容处理

Question

我是 Angular JS 的新手，正在尝试文件上传。我的要求是在单击按钮时提交多部分数据。

我读到 ng-model 不适用于 type="file"，所以我了解了解决方法，并复制了该指令。在执行该指令后，在发送数据时，没有内容处置数据集。我的意思是我想在服务器端读取的文件名、内容类型等。这就是为什么我在 headerOfFilePart.getFileName()

处得到 null 的原因

我做错了什么。在 Angular JS 中实现我上面描述的事情的正确方法是什么。

    <div ng-controller="uploadController">  
        <h2> Add Order </h2>
        Enter your Name: 
            <input type="text" name="name" ng-model="myName"/>
            <input type="file" fileread="vm.uploadme" />
            <input type="button" name="button" ng-click='uploadFile()'/>
    </div>

这是我的 JS 部分

validationApp.controller('uploadController', function($scope,$http,$location,$window) {
    $scope.uploadFile = function() {

        var fd = new FormData();
        //Take the first selected file
        fd.append("file", $scope.vm.uploadme);
        fd.append("name", $scope.myName);

        uploadUrl = "http://localhost:8080/IPOCCService/rest/UserManager/upload1";
        $http.post(uploadUrl, fd, {
            withCredentials: true,
            headers: {'Content-Type': undefined },
            transformRequest: angular.identity
        }).
        success(function(data, status, headers, config) {
            alert(data);
        }).
        error(function(data, status, headers, config) {
            alert("failure");
        });

    };
});


validationApp.directive("fileread", [function () {
    return {
        scope: {
            fileread: "="
        },
        link: function (scope, element, attributes) {
            element.bind("change", function (changeEvent) {
                var reader = new FileReader();
                reader.onload = function (loadEvent) {
                    scope.$apply(function () {
                        scope.fileread = loadEvent.target.result;
                    });
                };
                reader.readAsDataURL(changeEvent.target.files[0]);
            });
        }
    };
}]);

休息Java

    @POST
    @Path("/upload1")
    @Produces({ MediaType.APPLICATION_JSON} )
    @Consumes(MediaType.MULTIPART_FORM_DATA)
    public Response responseMsg3(FormDataMultiPart form) {
        System.out.println("File Uploaded");

        FormDataBodyPart filePart1 = form.getField("name");
        System.out.println(filePart1.getName() + " = " +filePart1.getValue());

        FormDataBodyPart filePart = form.getField("file");

        ContentDisposition headerOfFilePart =  filePart.getContentDisposition();
        InputStream fileInputStream = filePart.getValueAs(InputStream.class);
        String filePath = SERVER_UPLOAD_LOCATION_FOLDER + headerOfFilePart.getFileName();



        // save the file to the server
        saveFile(fileInputStream, filePath);
        String output = "File saved to server location : " + filePath;
        return Response.status(200).entity("true").build();
    }

Answer 1

当您使用 FileReader 读取文件时，仅文件内容会分配给您的范围:

scope.fileread = loadEvent.target.result;

在您的情况下，只需将文件分配到您的范围:

link: function (scope, element, attributes) {
      element.bind("change", function (changeEvent) {
         scope.$apply(function(){
              scope.fileread = changeEvent.target.files[0];
         // changeEvent.target.files[0] is an HTML5 file object which contains ALL
         // information about the file including fileName, contents,...
         // scope.fileread is now assigned the selected file
         });   
     });
}