将文件上传到angularjs中的RESTful服务

i try to make angular CRUD app that is a bit like "dropbox". So, it must have file and folder hosting with sharing and access functionality. I'm stuck on a question how to upload image and video files? I used File API (FileReader, Blob) to make preview of files on the client side but i dont have idea how to POST this type of data to server.

我尝试制作有点像“Dropbox”的角度CRUD应用程序。因此,它必须具有共享和访问功能的文件和文件夹托管。我遇到了如何上传图片和视频文件的问题?我使用File API(FileReader,Blob)在客户端进行文件预览,但我不知道如何将这种类型的数据发布到服务器。

2 个解决方案

#1

Something like this should work well to send as multipart/form-data request to backend API:

这样的东西应该可以很好地将multipart / form-data请求发送到后端API:

var file = ... // get from file input;
var backendUrl = ...
var fd = new FormData();

fd.append('myFile', file, 'filename.ext');

$http.post(backendUrl, fd, {
    // this cancels AngularJS normal serialization of request
    transformRequest: angular.identity,
    // this lets browser set `Content-Type: multipart/form-data` 
    // header and proper data boundary
    headers: {'Content-Type': undefined}
})

.success(function(){
    //file was uploaded
})

.error(function(){
    //something went wrong 
});

See here for reference:

见这里供参考:

FormData API Doc

Using FormData Objects (MDN)

使用FormData对象(MDN)

multipart-formdata file upload with AngularJS

使用AngularJS上传multipart-formdata文件

#2

You can upload file using ngFileUpload or angularFileUpload directives.

您可以使用ngFileUpload或angularFileUpload指令上传文件。

In case of angularFileUpload, you use .upload in controller and in case of ngFileUpload, you use .http

在angularFileUpload的情况下,您在控制器中使用.upload,如果是ngFileUpload,则使用.http

Also, you can also use application/x-www-form-urlencoded content type instead of multipart provided your file is not huge. In case of application/x-www-form-urlencoded, you can just receive the value in rest webservice as normal InputStream thereby requiring no need of marshalling of multipart data.

此外,如果您的文件不是很大,您也可以使用application / x-www-form-urlencoded内容类型而不是multipart。在application / x-www-form-urlencoded的情况下,你可以在rest webservice中接收正常InputStream的值,从而不需要编组多部分数据。

You may refer the below for the possible ways to upload file using angular js and rest web service:

您可以参考以下内容,了解使用angular js和rest web服务上传文件的可能方法:

http://technoguider.com/2015/08/file-upload-using-angular-js-and-rest-web-service/

#1