How to upload image from VueJS to phpMyAdmin with axios?

Question

In my owner.vue, the admins are allowed to add owner into the table called "owner". For now, the owner's name can be successfully add into the database, while the column of it for image is empty. I wanted to make the admin able to add image into it together with the owner's name.

Owner.vue

//template

<v-text-field v-model="ob_person_name" label="Owner name" outlined required></v-text-field>
<input type="file" ref="ob_personal_document">                    
<v-btn text @click="createContact()">Confirm</v-btn>

//script

<script>
    export default {    
       data: function () {
           return{
              ob_person_name:'',
              ob_acc_type:""
           }
       },
       methods: {
           createContact: function(){
              if(this.$refs.form.validate()){
                   this.ob_personal_document = this.$refs.ob_personal_document.files[0];
                   let formData = new FormData();
                   formData.append('ob_person_name', this.ob_person_name)
                   formData.append('ob_personal_document', this.ob_personal_document);

            var owner = {};
                 formData.forEach(function(value, key){
                 owner[key] = value;
            });

              this.axios({ 
                   method: 'post',
                   url: 'http://www.example.com/process.php?action=create',
                   data: formData,
                   config: { 
                       headers: {
                         'Content-Type': 
                         'multipart/form-data' 
                       }}
                   }).then(function (response) {
                       console.log(response)
                       this.newOwner.push(owner)
                   }).catch((error) => {
                       console.warn(error.message);
                   }) 
              }

     } 
</script>

process.php

<?php
$host = '111.22.222.111';
$dbname = 'test';
$username = 'username';
$password = "password";

$conn = mysqli_connect($host, $username, $password,$dbname);

// Check connection
    if (!$conn) {
        die("Connection failed!" .mysqli_connect_error());
    }

    $result = array('error'=>false);
    $action = '';

    if(isset($_GET['action'])){
        $action = $_GET['action'];
    }

    if($action == 'read'){
        $sql = $conn->query("SELECT * FROM owners");
        $owners = array();
        while($row = $sql->fetch_assoc()){
            array_push($owners, $row);
        }
        $result['owners'] = $owners;
    }

    if($action == 'create'){
          $ob_person_name= $_POST['ob_person_name'];
          $ob_personal_document = $_FILES['ob_personal_document'];

    $sql = $conn->query("INSERT INTO owners (ob_person_name, ob_personal_document)
    VALUES('$ob_person_name', '$ob_personal_document')");

    if($sql){
         $result['message'] = "Owner added successfully!";
    }
    else {
         $result['error'] = true;
         $result['message'] = "Failed to add owner";
    }
  }

The result of the image in phpMyAdmin shows "Array" as the image below.

the outcome of the ob_personal_document

#phmadmin is mysql client. Image can be saved in the database. You need to research. - Upload your image by making changes in vue js and axios - make a route controller or url location where you can post your images - make suitable controller to fetch that image data. Image data is to be saved in the file and its reference in the database table - save that it in the database or reference of image file. — varun sharma, Sep 22 '20 at 04:49
phpMyAdmin is a MySQL administration tool written in PHP, it is not a database itself. You are probably using MySQL or MariaDB as your DB. — Dharman, Sep 22 '20 at 10:06
**Warning:** You are wide open to [SQL Injections](https://stackoverflow.com/a/60496/1839439) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/5741187) — Dharman, Sep 22 '20 at 10:06
Thank you! But I've figured out how to pass image to database and then match the name of the image in the database and the name of the image in the phpMyAdmin image column. Thank you everyone! — cococrunch, Sep 23 '20 at 02:17

score 0 · Accepted Answer · answered Sep 22 '20 at 08:26

I've solved the problem such by posting the image to the server's database and create folder directory and created another file.php

file.php

<?php
$ob_personal_document = $_FILES['ob_personal_document']['name'];
$valid_extensions = array("jpg","jpeg","png","pdf");
$extension = pathinfo($ob_personal_document, PATHINFO_EXTENSION);
if(in_array(strtolower($extension),$valid_extensions) ) {
   if(move_uploaded_file($_FILES['ob_personal_document']['tmp_name'], "uploads/".$ob_personal_document)){
      echo 1;
   }else{
      echo 0;
   }
}else{
   echo 0;
}
exit;

owner.vue

//template

<input type="file" id="ob_personal_document" ref="ob_personal_document" />
<button type="button" @click='uploadFile()' >Upload file</button>

//add another function after createContact

uploadFile: function(){
       this.ob_personal_document = this.$refs.ob_personal_document.files[0];

       let formData = new FormData();
       formData.append('ob_personal_document', this.ob_personal_document);

       this.axios.post('file.php', formData,
       {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
       })
       .then(function (response) {

          if(!response.data){
             alert('File not uploaded.');
          }else{
             alert('File uploaded successfully.');
          }

       })
       .catch(function (error) {
           console.log(error);
       });

     },

In this case, I've also added the name of the "image" to phpMyAdmin column to get the image that is same with the image's name in the storage.

How to upload image from VueJS to phpMyAdmin with axios?

1 Answers1