将上传的图像发送到服务器并将其保存在服务器中

Question

我要上传图像并将其保存在服务器中。我上传了图像并获得了预览，但是我被困在将图像发送到服务器上。我想使用角度服务将此图像发送到服务器。

这是HTML代码

<input type="file" fileread="vm.uploadme" />
<img src="{{vm.uploadme}}" width="100" height="50" alt="Image preview...">

这是指令

(function(){
    angular.module('appBuilderApp').directive("fileread", [function () {
        return {
            scope: {
                fileread: "="
            },
            link: function (scope, element, attributes) {
                element.bind("change", function (changeEvent) {
                    var reader = new FileReader();
                    reader.onload = function (loadEvent) {
                        scope.$apply(function () {
                            scope.fileread = loadEvent.target.result;
                        });
                    }
                    reader.readAsDataURL(changeEvent.target.files[0]);
                });
            }
        }
    }]);
})();

Answer 1

假设您在后端中期望Multipart，这是一段对我有用的代码。

这是一个jsfiddle。

var app = angular.module('myApp', [])



app.controller('MyController',



  function MyController($scope, $http) {



    //the image

    $scope.uploadme;



    $scope.uploadImage = function() {

      var fd = new FormData();

      var imgBlob = dataURItoBlob($scope.uploadme);

      fd.append('file', imgBlob);

      $http.post(

          'imageURL',

          fd, {

            transformRequest: angular.identity,

            headers: {

              'Content-Type': undefined

            }

          }

        )

        .success(function(response) {

          console.log('success', response);

        })

        .error(function(response) {

          console.log('error', response);

        });

    }





    //you need this function to convert the dataURI

    function dataURItoBlob(dataURI) {

      var binary = atob(dataURI.split(',')[1]);

      var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

      var array = [];

      for (var i = 0; i < binary.length; i++) {

        array.push(binary.charCodeAt(i));

      }

      return new Blob([new Uint8Array(array)], {

        type: mimeString

      });

    }



  });





//your directive

app.directive("fileread", [

  function() {

    return {

      scope: {

        fileread: "="

      },

      link: function(scope, element, attributes) {

        element.bind("change", function(changeEvent) {

          var reader = new FileReader();

          reader.onload = function(loadEvent) {

            scope.$apply(function() {

              scope.fileread = loadEvent.target.result;

            });

          }

          reader.readAsDataURL(changeEvent.target.files[0]);

        });

      }

    }

  }

]);


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">

  <div ng-controller="MyController">

    <input type="file" fileread="uploadme" />

    <img src="{{uploadme}}" width="100" height="50" alt="Image preview...">

    <br/>

    <p>

      Image dataURI:

      <pre>{{uploadme}}</pre>

    </p>

    <br/>

    <button ng-click="uploadImage()">upload image</button>

  </div>

</div>

请注意 以下部分：

{
    transformRequest: angular.identity,
    headers: {
        'Content-Type': undefined
    }
}

是一些Angular魔术，为了使$ http解析FormData并找到正确的内容类型，等等。