अपलोड एकाधिक फ़ाइलों

Question

---

मैं

ब्राउज़ फ़ाइलें बटन

<input type="file" upload-files multiple /> 

बनाएं बटन है

<button class="btn btn-link" ng-click="store()" >Create</button> 

---

निर्देशक

myApp.directive('uploadFiles', function() { 
    return { 
     scope: true, 
     link: function (scope, element, attrs) { 
      element.bind('change', function (event) { 
       var files = event.target.files; 
       for (var i = 0; i < files.length; i++) { 
        scope.$emit("seletedFile", { file: files[i] }); 
       } 
      }); 
     } 
    }; 
}); 

---

फ़ाइल के लिए सुनो

$scope.files = []; 
$scope.$on("seletedFile", function (event, args) { 

    console.log("event is ", event); 
    console.log("args is ", args); 

    $scope.$apply(function() { 
     $scope.files.push(args.file); 
    }); 

}); 

---

डेटा पोस्ट और चयनित फ़ाइलों का चयन किया।

$scope.store = function() { 

    $scope.model = { 
     name: $scope.name, 
     type: $scope.type 
    }; 

    $http({ 
     method: 'POST', 
     url: '/image/store', 
     headers: { 'Content-Type': undefined }, 
     transformRequest: function (data) { 
      console.log("data coming into the transform is ", data); 
      var formData = new FormData(); 
      formData.append("model", angular.toJson(data.model)); 
      for (var i = 0; i < data.files; i++) { 
       formData.append("file" + i, data.files[i]); 
      } 
      return formData; 
     }, 

     data: { model: $scope.model, files: $scope.files } 

    }) 


    .then(function successCallback(response) { 
     console.log("%cSuccess!", "color: green;"); 
     console.log(response); 
     $scope.refresh(); 
     $scope.showModal = false; 
     }, function errorCallback(response) { 
     console.log("%cError", "color: red;"); 
     console.log(response); 
    }); 
}; 

---

परिणाम

मेरे कंसोल में, मैं नहीं दिख रहा है मेरी फ़ाइलें बैक-एंड में मेरी नियंत्रक को भेज देगा मिला है।

array:1 [ 
    "model" => "{"type":"wedding"}" 
] 

---

प्रश्न

मैं क्या कदम भूल गए?

कोई इसके बारे में कैसे और डीबग करेगा?

---

Answer 1

यहाँ आप के लिए कुछ सुझाव:

1. multipart/form-data को Content-type सेट बनाने की तरह .... कुछ करने के लिए सामग्री प्रकार सेट करने के लिए "यह उस में कुछ हिस्सा है, तो आप सुनिश्चित करें इसे ठीक से प्राप्त करें "चीज।
2. एक्सिस का उपयोग करें। यहां एक कामकाजी उदाहरण हैं (यदि आपने एक्सिस का उपयोग नहीं किया है, तो यह उदाहरण भी अच्छा है)। Example to Axios on Uploading File।

Answer 2

मैंने कई कोणीय 1 परियोजनाएं की हैं और यह भी पता है कि फ़ाइलों को $ http api के माध्यम से अपलोड करना आसान नहीं है। कोड स्निपेट के नीचे आशा है कि मैंने अपनी परियोजनाओं में उपयोग किया है, आपकी मदद कर सकता है।

$scope.store = function() { 
    var formData = new FormData(); 

    // add normal properties, the name should be the same as 
    // what you would use in a html form 
    formData.append('model[name]', $scope.name); 
    formData.append('model[type]', $scope.type); 

    // add files to form data. 
    for (var i = 0; i < $scope.files; i++) { 
    formData.append('file' + i, $scope.files[i]); 
    } 

    // Don't forget the config object below 
    $http.post('/image/store', formData, { 
    transformRequest: angular.identity, 
    headers: {'Content-Type': undefined} 
    }).then(function() { 
    // ... 
    }); 
}; 

Answer 3

आप FormData उपयोग कर सकते हैं बजाय

var formData = new FormData(); 

    formData.append('model[var]', $scope.var); 

    // For add to the FormData other file 
    for (var i = 0; i < $scope.files; i++) { 
    formData.append('file' + i, $scope.files[i]); 
    } 

// POST REQUEST MUST BE: 
    $http.post('url', formData, { 
    transformRequest: angular.identity, //It is for allowing files 
    headers: {'Content-Type': undefined} 
    }).then(function(response) 
    { 
    // verify if response get 200 
    }); 

Answer 4

मैं बहुत कोणीय में अनुभवी नहीं कर रहा हूँ, इसलिए मुझे लगता है कि अपने सामने के अंत काम करता है यह सोचते हैं रहा हूँ।

डिबगिंग टिप बुलाया PHP फ़ाइल बनाएं ... मुझे पता नहीं ... file_dump.php।उस फ़ाइल में, इस कोड को रखें:

<?php 
    echo "<pre>" 
    print_r($_REQUEST) 
    echo "</pre>" 
?> 

और अपना फॉर्म सबमिट करें। यह आपको आपके सभी अनुरोध डेटा दिखाएगा। अगर आप आउटपुट में अपनी फाइलें नहीं देखते हैं, तो यह आपकी जावास्क्रिप्ट में एक समस्या है। चूंकि मैं कोणीय में अच्छा नहीं हूं, इसलिए मैं आपको इस लिंक पर इंगित करने जा रहा हूं: link to multiple file upload tutorial using Angular। ये लोग जानते हैं कि वे क्या कर रहे हैं।

यदि आप file_dump.php आउटपुट में अपनी फ़ाइलें देखते हैं, तो यह आपके बैकएंड - लैरवेल के साथ एक समस्या है। यह, मैं आपकी सहायता कर सकता हूं, लेकिन मुझे इस पहलू में सहायक होने के लिए आपकी स्क्रिप्ट देखने की आवश्यकता है।

कृपया file_dump.php के परिणाम पोस्ट करें।

इसके अलावा, क्या आप फ़ाइलों को लाने के लिए सही तरीकों का उपयोग कर रहे हैं? Link। यदि नहीं, तो हम अपने अपराधी पाया है ...

= डी
प्रणव

Answer 5

यह मेरा निर्देश है:

app.directive('fileModel', ['$parse', 'message', function ($parse, message) { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 

      var model = $parse(attrs.fileModel); 
      var modelSetter = model.assign; 

      //This part is for validate file type in current case must be image 
      element.bind('change', function (e) { 
       if (attrs.onlyImages == 'true') { 
        if (element[0].files[0].name.substring(element[0].files[0].name.lastIndexOf('.')) != '.jpg' 
         && element[0].files[0].name.substring(element[0].files[0].name.lastIndexOf('.')) != '.jpeg' 
         && element[0].files[0].name.substring(element[0].files[0].name.lastIndexOf('.')) != '.png' 
         && element[0].files[0].name.substring(element[0].files[0].name.lastIndexOf('.')) != '.gif' 
         && element[0].files[0].name.substring(element[0].files[0].name.lastIndexOf('.')) != '.bmp' 
        ) { 
         message.error("This field only accept files of type images(jpg,png)"); 
         element.attr('is_valid', false); 
         return false; 
        } else { 
         element.attr('is_valid', true); 
        } 
       } 
       scope.$apply(function() { 
        modelSetter(scope, element[0].files[0]); 
       }); 
      }); 
     } 
    }; 
}]); 

एचटीएमएल:

<input type="file" only-images="true" file-model="data.image" > 

और जेएस नियंत्रक खंड:

var fd = new FormData(); 
fd.append('fileImage', data.image); 

$http.post('http://url.com', fd, { 
       transformRequest: angular.identity, 
       headers: {'Content-Type': undefined,} 
      }) 

Laravel पर हो और कॉपी छवि के लिए: डॉक्स

https://laravel.com/docs/5.4/requests#files