首页 文章

使用angular-file-upload上传base64图像

提问于
浏览
0

我创建了一个角度的表单,用户可以从网络摄像头拍摄照片,我使用ng-webcam,在我拍摄照片后,将其作为base64图像保存在作用域中 . 现在我尝试使用angular-file-upload上传此内容 . 但我不太明白它是如何工作的 . 项目中的示例是从PC上传图像,但我想设置base64图像并发送它 .

我怎样才能做到这一点?

UPDATED

这就是我通常从计算机上传图片的方式,我使用名为 uploadProfilePicture(); 的函数 . 所以我想要做的,是放在请求中,我想是 $scope.uploader 我的 $scope.photo 这是我的base64图像 .

//This is where I take the image from de webcam
$scope.onCaptureComplete = function(src) {
  $scope.photo = src[0];
};

$scope.uploader = new FileUploader({
  url: 'api/user/picture'
});

// Called after the user selected a new picture file
$scope.uploader.onAfterAddingFile = function(fileItem) {
  if ($window.FileReader) {
    var fileReader = new FileReader();
    fileReader.readAsDataURL(fileItem._file);

    fileReader.onload = function(fileReaderEvent) {
      $timeout(function() {
        $scope.imageURL = fileReaderEvent.target.result;
        // console.log($scope.imageURL);
        $scope.localImg = true;
      }, 0);
    };
  }
};

// Called after the user has successfully uploaded a new picture
$scope.uploader.onSuccessItem = function(fileItem, response, status, headers) {
  $scope.localImg = false;

  // Show success message
  $scope.success = true;

  // Populate user object
  $scope.user = Authentication.user = response;

  // Clear upload buttons
  $scope.cancelUpload();
};

// Change user profile picture
$scope.uploadProfilePicture = function() {
  // Clear messages
  $scope.success = $scope.error = null;

  // Start upload
  $scope.uploader.uploadAll();
};

1 回答

  • 0

    试试这个对我有用 .

    视图:

    <img ng-src="data:image/jpeg;base64,{{unImage.image}}" class="images" />
    
    <div class="col-md-9 lato size-twelve grey" editable-file="editImage" e-onchange="angular.element(this).scope().uploadFile(this, angular.element(this).scope().allUnits.images)" e-rows="7" e-cols="40" e-name="image" e-form="rowform" e-multiple>
    </div>
    

    控制器功能:

    $scope.uploadFile = function (input, allUnits) {
                allUnits.images = [];
                if (input.files && input.files[0]) {
                    for (var i = 0; i < input.files.length; i++) {
                        allUnits.images.push(input.files[i]);
                    }
                }
    };
    
    var file=image['images'];
    Upload.upload({
                    method: 'POST',
                    headers: {
                        'Authorization': 'Bearer ' + window.localStorage.getItem('token')
                    },
                    url: baseUrl + '/test/upload-image',
                    data: {id: data.id, file: file}
     });
    

相关问题