tải tệp lên dịch vụ RESTful trong angularjs

Question

tôi cố gắng tạo ứng dụng CRUD góc cạnh giống như "dropbox". Vì vậy, nó phải có tập tin và thư mục lưu trữ với chức năng chia sẻ và truy cập. Tôi đang mắc kẹt trên một câu hỏi làm thế nào để tải lên các tập tin hình ảnh và video? Tôi đã sử dụng File API (FileReader, Blob) để tạo bản xem trước các tệp ở phía máy khách nhưng tôi không có ý tưởng cách POST loại dữ liệu này đến máy chủ.

Answer 1

Something như thế này nên làm việc tốt để gửi như multipart/form-data yêu cầu phụ trợ 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 
}); 

Xem ở đây để tham khảo:

FormData API Doc

Using FormData Objects (MDN)

multipart-formdata file upload with AngularJS

Answer 2

Bạn có thể tải lên tệp bằng cách sử dụng lệnh ngFileUpload hoặc angularFileUpload.

Trong trường hợp angularFileUpload, bạn sử dụng .upload trong điều khiển và trong trường hợp ngFileUpload, bạn sử dụng .http

Ngoài ra, bạn cũng có thể sử dụng application/x-www-form-urlencoded nội dung thay vì gõ multipart cung cấp tập tin của bạn không phải là rất lớn. Trong trường hợp của ứng dụng/x-www-form-urlencoded, bạn chỉ có thể nhận được giá trị trong phần còn lại webservice như InputStream bình thường do đó đòi hỏi không cần marshalling dữ liệu đa.

Bạn có thể tham khảo dưới đây cho những cách có thể tải lên tập tin sử dụng js góc và dịch vụ web còn lại:

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