AngularJS Tải lên tệp và gửi cho DB

Question

Tôi đã cố gắng để có được ngFileUpload hoạt động để tôi có thể tải lên hình ảnh và gửi chúng tới DB - trong trường hợp của tôi là mongoLab DB chấp nhận các đối tượng JSON có thể là POST ed với cú pháp như sau:

$http.post('myMongoName/myDb/myCollection/myTable', {'key': 'value'}) 

Khá đơn giản. Tuy nhiên, tôi đang bối rối về cách gửi hình ảnh được tải lên bằng cách sử dụng ngFileUpload cho DB. Tôi đang sử dụng cú pháp quen thuộc được giới thiệu trên trang tài liệu ngFileUpload của:

$scope.upload = function (files) { 
     if (files && files.length) { 
      for (var i = 0; i < files.length; i++) { 
       var file = files[i]; 
       console.log(file); 
      Upload.upload({ 
       url: myMongoLabURL, 
       fields: {'sup': 'sup'}, 
       file: file 
       }) 
      }).success(function (data, status, headers, config) { 
        console.log('file ' + config.file.name + 'uploaded. Response: ' + data); 
       }); 
      } 
     } 
} 

Nhưng, sau khi đăng đối tượng file ra, tôi nhận được đối tượng:

File {} 
$$hashKey: "object:76" 
lastModified: 1433922719000 
lastModifiedDate: Wed Jun 10 2015 00:51:59 GMT-0700 (PDT) 
name: "1.png" 
size: 138024 
type: "image/png" 
webkitRelativePath: "" 
__proto__: File 

Không ai trong số đó, bao gồm các nhị phân hình ảnh thực tế có thể được lưu trữ cho DB. Tôi về cơ bản không có ý tưởng về nơi mà hình ảnh thực tế chính nó là thực sự được tải lên! Nó cũng quan trọng cần lưu ý là tôi không nhận được phản hồi từ máy chủ với cú pháp này - mặc dù, nếu tôi có thể nhận được nhị phân của hình ảnh, tôi chỉ có thể sử dụng phương thức quen thuộc $http.post và tự đẩy hình ảnh vào DB.

Làm cách nào để tìm nhị phân của hình ảnh đã tải lên và đẩy nó vào DB? Hình ảnh tồn tại ở đâu, sau khi được tải lên — và hình ảnh đó được tải lên ở đâu? Tôi đang làm điều này trên localhost vì vậy có vẻ như trình duyệt đã đọc tất cả các thuộc tính của hình ảnh, nhưng tôi không chắc chắn làm cách nào để biến điều này thành thông tin chi tiết có ý nghĩa mà tôi có thể sử dụng để lưu trữ hình ảnh vào DB bên ngoài của mình.

Cảm ơn bạn đã được trợ giúp.

Answer 1

Tôi đã kết thúc bằng cách sử dụng FileReader API. Cụ thể nhất, đọc URI dưới dạng blob. Tôi thực hiện một cái gì đó như sau trong một chỉ thị tùy chỉnh. Tôi đã kết thúc bao gồm rất nhiều bài đọc attrs cho phép chỉ thị được sử dụng nhiều lần trong các phạm vi cô lập trên cùng một trang — nhưng tôi sẽ để lại điều đó ở đây. Tôi có thể cung cấp cho bạn toàn bộ chỉ thị nếu nó hữu ích - nhưng một thời gian ngắn, nó trông giống như sau:

function create_blob(file) { 
    var deferred = $q.defer(); 
    var reader = new FileReader(); 
    reader.onload = function() { 
      deferred.resolve(reader.result); 
    }; 
    reader.readAsDataURL(file); 
    return deferred.promise; 
} 
$scope.$watch('files', function() { 
    $scope.upload($scope.files); 
}); 
$scope.upload = function(files) { 
    $scope.loading = true; 
    if (files && files.length) { 
     for (var i = 0; i < files.length; i++) { 
      var file = files[i]; 
      var promise = create_blob(file); 
      promise.then(function(result) { 
       var thumb = resize(result); 
       Upload.http({ 
        url: '/path', 
        data: result 
       }) 
       .progress(function (evt) { 
        console.log(evt); 
        var progressPercentage = parseInt(100.0 * evt.loaded/evt.total); 
        console.log('progress: ' + progressPercentage + '% '); 
       }) 
       .success(function (data, status,headers,config) { 

... v.v.

Tôi nghĩ rằng sẽ làm điều đó cho bạn. Việc thu thập dữ liệu blob có thể gây nhầm lẫn vì khi bạn tải lên hình ảnh, bạn không thể thấy bất kỳ dữ liệu nào trong phạm vi — mặc dù phần còn lại của dữ liệu meta của hình ảnh sẽ hiển thị! Chức năng create_blob sẽ nhận được nó cho bạn mặc dù ở định dạng blob. Hãy thử thực hiện một hàm console.log(reader.readAsDataURL(file); bên trong hàm đó để xem dữ liệu trực tiếp.

Tôi mất nhiều thời gian để tìm hiểu và tôi không chắc đây có phải là cách tốt nhất để làm điều đó không - nếu có ai biết tốt hơn, xin vui lòng đề xuất! :-)