通过AJAX/AngularJS发送调整大小的图像

问题描述：

基本上我试图调整图像大小，然后发送并保存在服务器上。我正在使用此指令Mischi/angularjs-imageupload-directive主要用于调整图像大小。不过，我不知道如何发送这个“调整大小”的。我得到的唯一回报是dataURL用于调整大小的图像，并且我找到了解决方案来使blob不在文件中。然而我的服务器响应“500内部服务器错误”，我认为它是因为Content-Type：application/ocet-stream。我需要发送内容类型：图像/ *通过AJAX/AngularJS发送调整大小的图像

继承人我的脚本

angular.module('imageuploadDemo', ['imageupload']) 
     .controller('DemoCtrl', function($scope, $http) { 

     // Not important stuff, only to clear/fill preview and disable/enable buttons 
      $scope.clearArr = function() { 
      $scope.images4 = null; 
      } 

      $scope.testowy = function(test) { 
      console.log(test); 
      } 

     // --- Creating BLOB --- // 
      function dataURLtoBlob(dataurl) { 
       var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], 
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); 
       while(n--){ 
        u8arr[n] = bstr.charCodeAt(n); 
       } 
       return new Blob([u8arr]); 
      } 

      $scope.test; 
     // --- Here magic goes on --- // 
      $scope.single = function(image) { 
       var formData = new FormData(); 

       angular.forEach(image, function(file) { 
       var blob = dataURLtoBlob(file.resized.dataURL); 

       formData.append('files[]', blob); 
       //formData.append('files[]', file.file); <-- This works, but sending non-resized image (raw one) 
       }) 

       formData.append('id', $scope.test); 
       console.log('test'); 

       $http.post('myserver/addimg', formData, { 
        headers: { 'Content-Type': undefined }, //I am not even sure if its working... 
        transformRequest: angular.identity 
       }).success(function(result) { 
        $scope.uploadedImgSrc = result.src; 
        $scope.sizeInBytes = result.size; 
       }); 
      }; 
     });

这里是我的服务器站点

public function add(Request $request) 
{ 


$id=$request->id; 
    $files = Input::file('files'); 

    foreach($files as $file) { 

     $destinationPath = 'galeria'; 
     $filename = $file->getClientOriginalName(); 
     $file->move($destinationPath, $filename); 
     copy('galeria/'.$filename,'galeria/thumbs/'.$filename); 
     image::make('galeria/thumbs/'.$filename); 
     image::make('galeria/thumbs/'.$filename,array(
      'width' => 300, 
      'height' => 300, 
     ))->save('galeria/thumbs/'.$filename); 

     Images::create(['src'=>$filename,'id_category'=>$id]); 
     return redirect()->back(); 
    } 
    return Images::all(); 
}

实际上使它成为一个blob将很可能只会使事情更难为你。如果我查看演示（https://github.com/Mischi/angularjs-imageupload-directive/blob/master/demo.html），您应该能够以相同的方式上传调整大小的图像。 PHP通过超级全局$ _FILES var发送文件，在Laravel之间有一层。通过对php/laravel收到的内容进行一些调试，您应该可以很轻松地使用它。您的BLOB方式增加了额外的复杂性，将图像转换为blob可以更容易地将其存储在数据库中，但不太容易将其存储在文件系统中。 –

我知道我应该能够上传调整大小的图像，但我不知道如何。当我查看我的DOM对象“文件”时，它包含我必须发送的“文件”（file.file），但是如果我查看“调整大小”，它只包含dataURL和内容类型，并且也发送此内容到服务器我recive 500内部服务器错误。我不是Laravel的专家，我试图找到一种以不同方式获取recivin数据的方法，但是没有找到任何有用的方法。 –

答

问题在FormData.append()

参数发送BLOB：在FORMDATA接口的append()方法追加新值到一个FormData对象中的现有密钥，或者在密钥不存在的情况下添加该密钥。

它有3个参数：FormData.append（名称，价值，文件名）

var formData = new FormData(); 
// Key pair value 
formData.append('username', 'Chris'); 
formData.append('userpic', myFileInput.files[0], 'chris.jpg'); 

// Array Notation: 
formData.append('userpic[]', myFileInput1.files[0], 'chris1.jpg'); 
formData.append('userpic[]', myFileInput2.files[0], 'chris2.jpg');

参考网址： https://developer.mozilla.org/en-US/docs/Web/API/FormData/append

答

嘿，我发现我自己的答案。这个问题是不发送图像的名字......所以你必须做的一切与名

formData.append('files[]', blob, file.file.name);

查看我的答案了解更多的细节 –

通过AJAX/AngularJS发送调整大小的图像

相关推荐