Postingan lainnya

Axios dan vue js upload image ke database/ folder

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

vue php

@dzul29

1 Kontribusi 1 Poin

Diperbarui 6 tahun yang lalu

4 Jawaban:

Sorry sebelumnya, kalau agan tidak pakai form terus user upload nya lewat mana ya ? ada source kode nya gan

@markeronly

378 Kontribusi 230 Poin

Dipost 6 tahun 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

@Itsdonnisnoni

55 Kontribusi 31 Poin

Dipost 6 tahun 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);

?>

@Itsdonnisnoni

55 Kontribusi 31 Poin

Dipost 6 tahun 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...!!!

@Itsdonnisnoni

55 Kontribusi 31 Poin

Dipost 6 tahun yang lalu