Pass image vue to controller laravel?

I am handling vue and laravel image upload. I am passing image from vue to controller via axios

In vuejs :

<b-col md="3">
  <b-form-group>
  <label>ImageLogo:</label>
  <b-form-file
  name="image-logo"
  @change="changeImageLogo"
  />
  </b-form-group>
</b-col>
<b-col md="3">
   <b-form-group>
   <label>Success image:</label>
   <b-form-file
   name="success-image"
   @change="changeSuccessImage"
   />
   </b-form-group>
</b-col>
<b-col md="3">
   <b-form-group>
   <label>Fail image:</label>
   <b-form-file
   name="fail-image"
   @change="changeFailImage"
   />
   </b-form-group>
</b-col>
<b-col md="3">
   <b-form-group>
   <label>Image payment success:</label>
   <b-form-file
   name="image-payment"
   @change="changePaymentSuccess"
   />
   </b-form-group>
</b-col>
<b-row>
 <b-col md="5">
   <b-button variant="primary" block type="submit" @click="submitForm">
      Create
    </b-button>
  </b-col>
</b-row>

data () {
  return: {
    logo:'',
    imageSuccess:'',
    failImage:'',
    successPayment:''
  }
},
methods: {
    changeImageLogo(e) {
      let selectFile = e.target.files[0];
      this.logo = selectFile;
     },
     changeSuccessImage(e) {
      let imgSuccess = e.target.files[0];
      this.imageSuccess = imgSuccess;
     },
     changeFailImage(e) {
      let failImg = e.target.files[0];
      this.failImage = failImg;
     },
     successPayment(e) {
      let sspayment = e.target.files[0];
      this.successPayment = sspayment;
     },
     submitForm() {
       let formData = new FormData();
       formData.append("image-log", this.logo);
       formData.append("success-image", this.imageSuccess);
       formData.append("changeFailImage", this.failImage);
       formData.append("image-paymnet", this.successPayment);
     }
}

I use formData.append to pass the controller, but when there are many input files I have to write many methods. Is there a way to combine methods to get images together. Why do I need to pass up to 10 input files? Please give me ideas.Thank



from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/3wWrOJg
via IFTTT

تعليقات

إرسال تعليق

المشاركات الشائعة من هذه المدونة

How to Create Treeview with Bootstrap and jQuery

صورة
Hi! Today let's see about creating treeview using bootstrap and jquery . A Treeview is a tree like representation of elements in a hierarchical structure. It offers a quick and easy navigation through websites. Although there are several jquery plugins available for tree view that simplify the task, I wanted something that works well with bootstrap. And I found out a good library called 'Bootstrap Treeview' . It leverages the best of bootstrap framework and helps you display hierarchical tree structures using the JSON data set. You can do much more than a simple tree, like fetch data from the database and render a dynamic tree, make it collapsible, add icons , checkboxes and filters etc. Building Treeview with Bootstrap: Now let's see how to add treeview in bootstrap. To build the menu, we need three different libraries, Bootstrap CSS jQuery Bootstrap Treeview These libraries are available in the cdn, so you can load them directly on your projects without down...
قراءة المزيد

jQuery Datatables with PHP, MySQL and AJAX Example

صورة
Hi! In this tutorial let's look at the server-side processing of jquery datatables using php, mysql and ajax . In case you don't know, Datatables is an amazing jquery plugin that converts the simple html table into a feature-rich data grid with additional functions like instant search, pagination, multi-column sorting etc. The table works with multiple data sources like DOM, AJAX etc., and supports both client and server side processing. We have already seen about datatables with json data and here we will see about server side processing. For the server script, we are going to use PHP and MySQL as a data source. jQuery Datatables Server-side Processing with PHP and MySQL: Let's see how to fetch records from the server-side using ajax request and list it in the data tables. To use in this example, we need a dummy database. So let's create it first. Step 1) Create MySQL Database The following sql will create a mysql database, a table and some sample records i...
قراءة المزيد

How to Add Images to Dropdown List using jQuery

صورة
Hi! In this post, let's see how to add images to dropdown list using jquery . I had a form with a drop-down element for the list of countries and wanted to insert the corresponding country flag before each country name. But HTML does not support the addition of elements to select box. Then I found some CSS hack but this method is not compatible with all browsers. Finally, I decided to go with java script and found a fairly neat solution. Actually, it is a jquery plugin called 'select2'. It includes the autocomplete feature to dropdown list , but also allows you to add icons to those select options. Below, I'll show you how to use the select2 add-on to insert country flags before the country names in a drop-down list. jQuery - Adding Images to the Dropdown List: STEP-1) First load the 'jQuery' and 'Select2' libraries on the Web page. You need to add both 'css' and 'js' files of the plugin. <link href="https://cdnjs.cloudflar...
قراءة المزيد