October 20, 2021

Upload multiple files kết hợp Vue.js với PHP

Có nhiều cách để upload file lên server hoặc hosting của bạn, mỗi cách lại có ưu nhược điểm riêng, tùy vào từng trường hợp mà chúng ta áp dụng sao cho hợp lý. Trong bài viết này, mình sẽ hướng dẫn bạn cách để tải nhiều file cùng một lúc sử dụng Vue.js kết hợp với Php, bắt đầu thôi.

Download và tích hợp

Bạn có thể download package Axios tại GitHub hoặc sử dụng CDN có sẵn tại https://unpkg.com/axios/dist/axios.min.js

Tích hợp vào ứng dụng của bạn với vue.js và axios.min.js, ở đây mình sử dụng luôn CDN cho tiện.

<script src="vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Xử lý HTML

Tạo một thẻ có tên <div id=’myapp’> . Trong thẻ div này, tạo một phần tử input và một nút button. Trong input chúng ta thêm một trường ref sử dụng để truy cập file trong Vue.

Trong button thêm 1 sự kiện@click='uploadFile()'

Hiển thị file đã upload lên trong thẻ  <ul> <li>.

Completed Code

<div id='myapp'>

   <input type="file" id="uploadfiles" ref="uploadfiles" multiple />

   <button type="button" @click='uploadFile()' >Upload file</button>

   <br>

   <!-- Files names -->
   <div v-if="filenames.length" >
     <ul > 
       <li v-for= '(filename,index) in filenames' > 
       {{ filename }} 
       </li> 
     </ul>
   </div> 
</div>

Xử lý PHP

Tạo file có thêm  ajaxfile.php và thư mục  uploads để chứa file khi upload.

Tạo biến $files_arr để lưu trữ tệp tải lên.

Gán số lượng tổng số file tải lên vào biến  $countfiles và gán vị trí mà ta muốn lưu vào biến $upload_location

Thực hiện lặp lại với các file.

Gán tên file vào biến $filename  và đuôi mở rộng vào biến $ext.

Khởi tạo mảng $valid_ext với các loại tệp mà bạn cho phép. Nếu file upload có trong danh sách các loại tệp ở $valid_ext thi gán tên mới vào biến $newfilenamevà đường dẫn tệp đến $path.

Nếu tệp được tải lên thành công thì khởi tạo mảng $files_arr với tên là $newfilename.

Trả về kết quả của mảng$files_arr ở định dạng JSON.

Completed Code

<?php

// To store uploaded files path
$files_arr = array();

if(isset($_FILES['files']['name'])){

   // Count total files
   $countfiles = count($_FILES['files']['name']);

   // Upload directory
   $upload_location = "uploads/";

   // Loop all files
   for($index = 0;$index < $countfiles;$index++){

      if(isset($_FILES['files']['name'][$index]) && $_FILES['files']['name'][$index] != ''){
          // File name
          $filename = $_FILES['files']['name'][$index];

          // Get extension
          $ext = strtolower(pathinfo($filename, PATHINFO_EXTENSION));

          // Valid extensions
          $valid_ext = array("png","jpeg","jpg","pdf","txt","doc","docx");

          // Check extension
          if(in_array($ext, $valid_ext)){

             // File path
             $newfilename = time()."_".$filename;
             $path = $upload_location.$newfilename;

             // Upload file
             if(move_uploaded_file($_FILES['files']['tmp_name'][$index],$path)){
                $files_arr[] = $newfilename;
             }
          }

      }

   }

}

echo json_encode($files_arr);
die;

Xử lý Script

Khởi tạo Vue trên #myapp.

Thêm biến filename để lưu tệp tải lên thành công.

Định nghĩa function uploadFile() được gọi khi bấm vào nút tải lên.

Tạo đối tượng FormData, lặp lại các tệp đã chọn và nối vào đối tượng này.

formData.append("files[]", files[index]);

Lưu ý– Truy cập tệp bằng cách sử dụng $_FILES['files'] trong file PHP.

Gửi request AJAX tới ajaxfile.php, truyền đối tượng formData dưới dạng dữ liệu

Khi callback thành công, gán response.datacho filenamesvà cảnh báo số lượng tệp đã tải lên.

Completed Code

var app = new Vue({
  el: '#myapp',
  data: {
    filenames: []
  },
  methods: {

    uploadFile: function(){

       var el = this;

       let formData = new FormData();

       // Read selected files
       var files = this.$refs.uploadfiles.files;
       var totalfiles = this.$refs.uploadfiles.files.length;
       for (var index = 0; index < totalfiles; index++) {
          formData.append("files[]", files[index]);
       }

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

          el.filenames = response.data;

          alert(el.filenames.length + " files is been uploaded.");

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

    }
  }
})

Kết quả

 

Trên đây là ví dụ cơ bản của upload multiple file sử dụng Vue.js kết hợp với PHP. Nếu bạn có thắc mắc nào, hãy để lại comment dưới phần bình luận, mình sẽ giải đáp các thắc mắc một cách chi tiết nhất

Korakora

Chia sẻ kiến thức cho mọi người là niềm vui của mình

View all posts by Korakora →

Leave a Reply

Your email address will not be published. Required fields are marked *

icons8-exercise-96 challenges-icon chat-active-icon