php - How to upload image from VueJS to phpMyAdmin with axios?
Get the solution ↓↓↓
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.
Answer
Solution:
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.
Share solution ↓
Additional Information:
Link To Answer People are also looking for solutions of the problem: your system folder path does not appear to be set correctly. please open the following file and correct this: index.php
Didn't find the answer?
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.