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

來源

2016-01-20 Mirosław Kosiorkiewicz

實際上使它成爲一個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

來源

2016-01-20 15:29:31

嘿，我發現我自己的答案。這個問題是不發送圖像的名字......所以你必須做的一切與名

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

來源

2016-01-20 15:23:14

查看我的答案瞭解更多的細節 –

通過AJAX/AngularJS發送調整大小的圖像

回答

相關問題