将上传的图片发送到服务器并保存在服务器中 [英] Send an uploaded image to the server and save it in the server

问题描述

我想上传一张图片并将其保存在服务器中.我上传了图像并获得了预览，但我一直在将该图像发送到服务器.我想使用 Angular 服务将此图像发送到服务器.

这是html代码

<img src="{{vm.uploadme}}" width="100" height="50" alt="图片预览...">

这是指令

(function(){angular.module('appBuilderApp').directive("fileread", [function () {返回 {范围: {文件读取:="},链接:函数(范围、元素、属性){element.bind("change", function (changeEvent) {var reader = new FileReader();reader.onload = 函数(loadEvent){范围.$应用(函数(){scope.fileread = loadEvent.target.result;});}reader.readAsDataURL(changeEvent.target.files[0]);});}}}]);})();

解决方案

假设在后端你期望 Multipart 是一段对我有用的代码.

这里是一个 jsfiddle.

var app = angular.module('myApp', [])app.controller('MyController',函数 MyController($scope, $http) {//图片$scope.uploadme;$scope.uploadImage = function() {var fd = new FormData();var imgBlob = dataURItoBlob($scope.uploadme);fd.append('文件', imgBlob);$http.post('图片网址',FD，{变换请求:angular.identity，标题:{'内容类型':未定义}}).成功(功能(响应){console.log('success', response);}).错误(功能(响应){console.log('error', response);});}//你需要这个函数来转换dataURI函数 dataURItoBlob(dataURI) {var binary = atob(dataURI.split(',')[1]);var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];var 数组 = [];for (var i = 0; i < binary.length; i++) {array.push(binary.charCodeAt(i));}返回新 Blob([new Uint8Array(array)], {类型: mimeString});}});//你的指令app.directive("文件读取", [功能() {返回 {范围: {文件读取:="},链接:功能(范围，元素，属性){element.bind("change", function(changeEvent) {var reader = new FileReader();reader.onload = function(loadEvent) {范围.$应用(函数(){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="图片预览..."><br/><p>图像数据URI:<pre>{{uploadme}}</pre></p><br/><button ng-click="uploadImage()">上传图片</button>

注意以下部分:

<代码>{变换请求:angular.identity，标题:{'内容类型':未定义}}

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

I want to upload an image and save it in the server. I uploaded the image an got the preview too, but I am stuck in sending that image to the server. I want to send this image to the server using angular services.

This is the html code

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

This is the directive

(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]);
                });
            }
        }
    }]);
})();

解决方案

Assuming in the backend you expect Multipart here is a piece of code that has worked for me.

And here is a 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>

Note that the following part:

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

is some Angular magic, in order for $http to parse FormData and find the correct content-type and so on...

这篇关于将上传的图片发送到服务器并保存在服务器中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！