angularjs - 使用 Angularjs 的 $http.post 和 Jersey-Rest-Backend 上传文件

Question

我在从上传的文件中获取内容处置信息时遇到问题。文件上传本身工作正常。但是 Content-Disposition 为空，这就是为什么我不知道上传文件的名称和类型。我正在通过 angularJs 的 $http 服务触发帖子。

@Path("/myrest")
@Service
public class RestService<Repsonse> {

    private static final String SERVER_UPLOAD_LOCATION_FOLDER = "C://Users/steven/Desktop/upload/";


    /**
     * Upload a File
     */
    @POST
    @Path("/upload")
    @Consumes(MediaType.MULTIPART_FORM_DATA)
    public Response uploadFile(
            @FormDataParam("myForm") InputStream fileInputStream,
            @FormDataParam("myForm") FormDataContentDisposition fileDetail
            ) {


        if (fileDetail == null) {
            System.out.println("form contentDispositionHeader is null");
//          return Response.status(Response.Status.INTERNAL_SERVER_ERROR).entity(Response.Status.INTERNAL_SERVER_ERROR.toString()).build();
        } else {
            System.out.println("form: " + fileDetail.toString());
        }


        Random randomno = new Random();


//      String filePath = SERVER_UPLOAD_LOCATION_FOLDER + contentDispositionHeader.getFileName();
//      String filePath = SERVER_UPLOAD_LOCATION_FOLDER + "bla.png";
        String filePath = SERVER_UPLOAD_LOCATION_FOLDER + "test" + randomno.nextInt(10000)  + ".jpg";


        // save the file to the server
        saveFile(fileInputStream, filePath);

        String output = "File saved to server location : " + filePath;

        return Response.status(200).entity(output).build();


    }

    // save uploaded file to a defined location on the server
    private void saveFile(InputStream uploadedInputStream,
            String serverLocation) {

        OutputStream outpuStream = null;

        try {
            outpuStream = new FileOutputStream(new File(serverLocation));
            int read = 0;
            byte[] bytes = new byte[1024];

            outpuStream = new FileOutputStream(new File(serverLocation));
            while ((read = uploadedInputStream.read(bytes)) != -1) {
                outpuStream.write(bytes, 0, read);
            }

        } catch (IOException e) {
            e.printStackTrace();
        } finally {

            try {

                if(outpuStream != null) {
                    uploadedInputStream.close();    
                }
                if(outpuStream != null) {
                    outpuStream.flush();
                    outpuStream.close();    
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

}

angularJs 部分:

js:

var file = $scope.myFile;

that.uploadFileToUrl = function(file, uploadUrl){

    var fd = new FormData();
            fd.append('file', file);

            return $http.post(uploadUrl, fd, {
                transformRequest: angular.identity,
                headers: {'Content-Type': undefined}
            });
        };

html部分:

<div ng-controller="fileUploadController">
input type="file" file-model="myFile"/>

<br>
<br>

Name: {{myFile.name}} <br>
Size: {{myFile.size}} <br>
Type: {{myFile.type}} <br>


<br>
<br>

<button ng-click="uploadFile();">Upload</button>
</div>

Answer 1

使用 ajax 上传文件属于 XHR 级别 2 规范，并非所有浏览器都真正支持...

更喜欢 $.fileUpload ( https://blueimp.github.io/jQuery-File-Upload/ ) 这样的方法在 Angular/单页应用程序中发送文件。

如果您确实知道要做什么，只需在您的 FormData 对象的另一个字段中添加 file.name 或 file.fileName 并以这种方式在服务器端获取它。