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

【问题标题】：Sending resized images through AJAX/AngularJS通过 AJAX/AngularJS 发送调整大小的图像
【发布时间】：2016-04-26 08:49:59
【问题描述】：

基本上我正在尝试调整图像大小，然后发送并保存在服务器上。我使用这个指令Mischi/angularjs-imageupload-directive 主要用于调整图像大小。但是我不知道如何发送这个“调整大小”的。我得到的唯一回报是调整大小图像的 dataURL，我找到了用它而不是文件制作 blob 的解决方案。但是，我的服务器以“500 内部服务器错误”响应，我认为这是因为 Content-Type：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();
}

【问题讨论】：

实际上把它变成一个 blob 可能只会让你更难。如果我查看演示 (github.com/Mischi/angularjs-imageupload-directive/blob/master/…)，您应该能够以相同的方式上传调整大小的图像。 PHP 通过超级全局 $_FILES var 发送文件，在 Laravel 中它中间有一层。通过对 php/laravel 接收到的内容进行一些调试，您应该可以很容易地使其工作。您的 BLOB 方式增加了额外的复杂性，将图像转换为 blob 更容易将其存储在数据库中，但不那么容易将其存储在文件系统中。
我知道我应该能够上传调整大小的图像，但我不知道如何。当我查看我的 DOM 对象“文件”时，它包含我必须发送的“文件”（file.file），但是如果我查看“调整大小”，它只包含 dataURL 和内容类型，并且当我发送这个到服务器我收到 500 内部服务器错误。我不是 Laravel 的专家，我试图找到一种以不同方式接收数据的方法，但没有找到任何有用的方法。

标签： javascript angularjs ajax laravel image-uploading

【解决方案1】：

呵呵，我自己找到了答案。问题不在于发送图像名称...所以您要做的就是发送带有名称的 blob

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

【讨论】：

查看我的回答了解更多详情

【解决方案2】：

FormData.append()中的问题

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

它有3个参数：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

【讨论】：