How to upload image from VueJS to phpMyAdmin with axios? - php

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

Answer 1

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.