Question

基本上我正在尝试调整图像大小，然后发送并保存在服务器上。我正在使用此指令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();
}

Answer 1

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

Answer 2

嘿，我自己找到了答案。问题不在于发送图像名称......因此您需要做的就是发送带有名称的blob formData.append（＆＃39; files []＆＃39;，blob，file.file.name）;

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

2 个答案: