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

Question

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

这是我的脚本

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

Answer 1

问题在 FormData.append()

参数:append() FormData 接口(interface)的方法将新值附加到 FormData 对象内的现有键上，或者添加键(如果尚不存在)。

It has 3 parameters: FormData.append(name, value, filename)

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