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

时间:2014-11-08 20:19:47

标签: angularjs file-upload multifile-uploader

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

2 个答案:

答案 0 :(得分:6)

这样的事情应该可以很好地将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 
});

请参阅此处以供参考:

FormData API Doc

Using FormData Objects (MDN)

multipart-formdata file upload with AngularJS

答案 1 :(得分:0)

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

如果是angularFileUpload,则在控制器中使用.upload,如果是ngFileUpload,则使用.http

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

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

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