Axios dan vue js upload image ke database/ folder

foto dzul29
1 Kontribusi 1 Coto
9 bulan yang lalu
Assalammualaikum.. mau bertanya, saya mau upload file (image) menggunakan vue.js dan axios. Nah, dikasus ini saya tidak menggunakan form soalnya saya pakai axios. Mungkin ada solusi?? terima kasih
Jawaban
foto markeronly
353 Kontribusi 204 Coto
9 bulan yang lalu
Sorry sebelumnya, kalau agan tidak pakai form terus user upload nya lewat mana ya ? ada source kode nya gan
foto donnisnoni95
54 Kontribusi 30 Coto
7 bulan yang lalu
mungkin maksud dari saudara @adzul29 itu dia langsung pake tag 'input'
<input type="file" />
saja, jadi dia tidak menggunakan tag 'form'
<form >
  <input type="file">
</form>
Iya kan Saudara @adzul29
foto donnisnoni95
54 Kontribusi 30 Coto
7 bulan yang lalu
Baik saudara @adzul29,, berikut adalah contoh kode phpnya
<?php

// KONEKSI DB
require './connection.php';

// File gambar dari client
$gambar_dari_client = $_FILES['gambar_profil'];

// Nama file gambar: nama ini adalah nama asli file yang  diupload, bisa diubah
$nama_gambar = $gambar_dari_client['name'];

// Nama file gambar sementara: secara default php akan simpan file gambar tersebut ke folder sementara (temporary)
$nama_tmp_gambar = $gambar_dari_client['tmp_name'];

// Folder untuk simpan gambar: tentukan nama folder untuk menyimpan file gambar
$folder_gambar = './gambar/';

// Destinasi gambar hasil dari nama folder + nama file gambar
$destinasi_file = $folder_gambar . $nama_gambar;

// Fungsi untuk memindahkan file dari folder sementara ke folder yang diinginkan
// parameter pertama adalah nama file sementara di line 12
// parameter kedua adalah folder tujuan dengan nama file
move_uploaded_file($nama_tmp_gambar , $destinasi_file);

?>
foto donnisnoni95
54 Kontribusi 30 Coto
7 bulan yang lalu
berikut adalah contoh dari sisi klien-nya
<body>
    <input type="file" id="gambar_profil">

    <button id="btnUpload"></button>

    <script type="text/javascript">

        var btnUpload = document.querySelector('#btnUpload');

        btnUpload.addEventListener('click', uploadGambar);
            
        // Upload Video
        function uploadGambar() {
            // Membuat Form Data Baru
            var data = new FormData(),
                inputGambar = document.getElementById('gambar_profil'),
                dataFile = inputGambar.files[0];

              // Tambahkan data video ke Form Data
              data.append('gambar_profil', dataFile);

              // Kirim, 
              axios.post('./upload.php', data);
        }

    </script>
</body>
Semoga membantu.... :) Happy Hacking...!!!

Login untuk diksusi di forum sekolah koding