Vue實(shí)現(xiàn)帶進(jìn)度條的文件拖動(dòng)上傳功能

更新時(shí)間：2018年02月23日 09:31:14 作者：切糕糕

這篇文章主要介紹了Vue實(shí)現(xiàn)帶進(jìn)度條的文件拖動(dòng)上傳功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下

1. 基本界面

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <link  rel="external nofollow" rel="stylesheet">
 <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
 <style>
  .dropbox {
   border: .25rem dashed #007bff;
   min-height: 5rem;
  }
 </style>
 <title>Document</title>
</head>
<body>
<div id="app" class="m-5">
 <div class="dropbox p-3">
  <h2 class="text-center">把要上傳的文件拖動(dòng)到這里</h2>
 </div>
</div>
<script>
 new Vue({
  el: '#app',
  data: {},
  methods: {},
  mounted: function () {}
 });
</script>
</body>
</html>

2. 檢測(cè)拖動(dòng)事件

首先讓頁面支持文件拖拽，在 Vue 的 mounted() 函數(shù)中添加代碼：

mounted: function () {
 var dropbox = document.querySelector('.dropbox');
 dropbox.addEventListener('dragenter', this.onDrag, false);
 dropbox.addEventListener('dragover', this.onDrag, false);
 dropbox.addEventListener('drop', this.onDrop, false);
}

當(dāng)把文件拖動(dòng)到瀏覽器的拖動(dòng)區(qū)域時(shí)，會(huì)觸發(fā)三種事件：

文件第一次進(jìn)入拖動(dòng)區(qū)時(shí)，觸發(fā) dragenter 事件
文件在拖動(dòng)區(qū)來回拖拽時(shí)，不斷觸發(fā) dragover 事件
文件已經(jīng)在拖動(dòng)區(qū)，并松開鼠標(biāo)時(shí)，觸發(fā) drop 事件

實(shí)現(xiàn)拖動(dòng)上傳，我們只需要關(guān)心 drop 事件。不過另外兩個(gè)事件也需要監(jiān)聽，目的是阻止瀏覽器默認(rèn)行為。如果不阻止，那么把文件拖到瀏覽器時(shí)，瀏覽器就會(huì)自動(dòng)下載這個(gè)文件（默認(rèn)行為），drop 事件觸發(fā)不出來。

事件的監(jiān)聽函數(shù)添加在 Vue 的 methods 對(duì)象中：

methods: {
 uploadFile: function (file) {
  console.log(file);
 },
 onDrag: function (e) {
  e.stopPropagation();
  e.preventDefault();
 },
 onDrop: function (e) {
  e.stopPropagation();
  e.preventDefault();
  var dt = e.dataTransfer;
  for (var i = 0; i !== dt.files.length; i++) {
   this.uploadFile(dt.files[i]);
  }
 }
},

onDrop() 函數(shù)中，通過 e.dataTransfer.files 可以拿到用戶拖動(dòng)到瀏覽器的文件的基本信息，uploadFile() 函數(shù)現(xiàn)在只這些信息打印了出來，可以了解到，拖動(dòng)到瀏覽器的每個(gè)文件都是一個(gè) File 對(duì)象：

3. 處理拖動(dòng)事件

現(xiàn)在，我們要給 uploadFile() 函數(shù)增加功能，實(shí)現(xiàn)拖動(dòng)文件時(shí)，拖動(dòng)區(qū)出現(xiàn)文件名和一個(gè)上傳進(jìn)度條。

首先在 Vue 的 data 對(duì)象中定義 files 屬性，用來保存所有拖動(dòng)到瀏覽器中文件的名稱。然后在uploadFile() 函數(shù)每當(dāng)被調(diào)用時(shí)，把文件名和上傳進(jìn)度保存到 files 中：

data: {
 files: []
},
methods: {
 uploadFile: function (file) {
  var item = {
   name: file.name,
   uploadPercentage: 67
  };
  this.files.push(item);
 },
}

上傳進(jìn)度的功能在后面再介紹，先寫一個(gè)固定值。

相應(yīng)地，在HTML代碼中，用 v-for 關(guān)鍵字顯示 files 的每一項(xiàng)：

<div class="dropbox p-3">
 <h2 class="text-center">把要上傳的文件拖動(dòng)到這里</h2>
 <div class="border m-2 d-inline-block p-4" style="width:15rem" v-for="file in files">
  <h5 class="mt-0">{{ file.name }}</h5>
  <div class="progress">
   <div class="progress-bar progress-bar-striped"
     :style="{ width: file.uploadPercentage+'%' }"></div>
  </div>
 </div>
</div>

而且，“把要上傳的文件拖動(dòng)到這里” 的提示只在拖動(dòng)區(qū)沒有文件的時(shí)候才顯示：

<h2 v-if="files.length===0" class="text-center">把要上傳的文件拖動(dòng)到這里</h2>

這樣，拖動(dòng)效果就有了：

4. 文件上傳

接下來實(shí)現(xiàn)真正的文件上傳，繼續(xù)往 uploadFile() 函數(shù)添加代碼：

uploadFile: function (file) {
 var item = {
  name: file.name,
  uploadPercentage: 67
 };
 this.files.push(item);
 var fd = new FormData();
 fd.append('myFile', file);

 var xhr = new XMLHttpRequest();
 xhr.open('POST', 'upload.php', true);
 xhr.send(fd);
},

這里用到了 FormData，把要上傳的文件附在了 FormData 上，并通過AJAX方式發(fā)送給PHP端。PHP端代碼：

if (isset($_FILES['myFile'])) {
 move_uploaded_file($_FILES['myFile']['tmp_name'], 'uploads/' . $_FILES['myFile']['name']);
 echo 'OK';
} else {
 echo 'No file specified';
}

現(xiàn)在刷新下頁面，把電腦上的兩個(gè)文件拖到瀏覽器中，PHP端會(huì)接收并保存文件到 uploads 目錄：

提示：如果拖放時(shí)遇到PHP返回了No file specified，或者 $_FILES 為 NULL 的情況時(shí)，有可能是PHP限制了POST請(qǐng)求最大字節(jié)，或者限制了上傳文件的體積。這時(shí)候需要調(diào)整下php.ini中的這兩個(gè)配置：

post_max_size = 20M // POST請(qǐng)求的最大字節(jié)數(shù)
upload_max_filesize = 20M // 上傳文件的最大體積

進(jìn)度條的展示

基本的上傳功能完成了，最后我們來完成進(jìn)度條。每當(dāng)AJAX請(qǐng)求發(fā)送了一段時(shí)間的數(shù)據(jù)時(shí)，都會(huì)生成一個(gè) progress 事件，我們可以監(jiān)聽 progress 事件來知道當(dāng)前的上傳進(jìn)度：

uploadFile: function (file) {
  ...
  xhr.upload.addEventListener('progress', function (e) {
    item.uploadPercentage = Math.round((e.loaded * 100) / e.total);
  }, false);
  xhr.send(fd);
},

e.loaded 代表當(dāng)前AJAX發(fā)送了多少字節(jié)，e.total 代表AJAX總共要發(fā)送多少字節(jié)。通過這兩個(gè)屬性可以計(jì)算上傳進(jìn)度的百分比。

這樣，一個(gè)帶進(jìn)度條的文件拖動(dòng)上傳功能就完成了。

附：完整代碼

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link  rel="stylesheet">
  <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
  <style>
    .dropbox {
      border: .25rem dashed #007bff;
      min-height: 5rem;
    }
  </style>
  <title>Document</title>
</head>
<body>
<div id="app" class="m-5">
  <div class="dropbox p-3">
    <h2 v-if="files.length===0" class="text-center">把要上傳的文件拖動(dòng)到這里</h2>
    <div class="border m-2 d-inline-block p-4" style="width:15rem" v-for="file in files">
      <h5 class="mt-0">{{ file.name }}</h5>
      <div class="progress">
        <div class="progress-bar progress-bar-striped"
           :style="{ width: file.uploadPercentage+'%' }"></div>
      </div>
    </div>
  </div>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      files: []
    },
    methods: {
      uploadFile: function (file) {
        var item = {
          name: file.name,
          uploadPercentage: 0
        };
        this.files.push(item);
        var fd = new FormData();
        fd.append('myFile', file);
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'upload.php', true);
        xhr.upload.addEventListener('progress', function (e) {
          item.uploadPercentage = Math.round((e.loaded * 100) / e.total);
        }, false);
        xhr.send(fd);
      },
      onDrag: function (e) {
        e.stopPropagation();
        e.preventDefault();
      },
      onDrop: function (e) {
        e.stopPropagation();
        e.preventDefault();
        var dt = e.dataTransfer;
        for (var i = 0; i !== dt.files.length; i++) {
          this.uploadFile(dt.files[i]);
        }
      }
    },
    mounted: function () {
      var dropbox = document.querySelector('.dropbox');
      dropbox.addEventListener('dragenter', this.onDrag, false);
      dropbox.addEventListener('dragover', this.onDrag, false);
      dropbox.addEventListener('drop', this.onDrop, false);
    }
  });
</script>
</body>
</html>

總結(jié)

以上所述是小編給大家介紹的Vue實(shí)現(xiàn)帶進(jìn)度條的文件拖動(dòng)上傳功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: