首頁  >  文章  >  web前端  >  在Vue中如何實現帶有進度條的檔案拖曳上傳功能

在Vue中如何實現帶有進度條的檔案拖曳上傳功能

亚连
亚连原創
2018-06-05 11:52:082351瀏覽

這篇文章主要介紹了Vue實現帶進度條的文件拖動上傳功能,本文透過實例代碼給大家介紹的非常詳細,具有參考借鑒價值,需要的朋友可以參考下

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 href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" 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>
<p id="app" class="m-5">
 <p class="dropbox p-3">
  <h2 class="text-center">把要上传的文件拖动到这里</h2>
 </p>
</p>
<script>
 new Vue({
  el: &#39;#app&#39;,
  data: {},
  methods: {},
  mounted: function () {}
 });
</script>
</body>
</html>

#2. 偵測拖曳事件

首先讓頁面支援檔案拖曳,在Vue 的mounted() 函數中加入程式碼:

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

當把檔案拖曳到瀏覽器的拖曳區域時,會觸發三種事件:

  1. 檔案第一次進入拖曳區時,觸發dragenter 事件

  2. 檔案在拖曳區來回拖曳時,不斷觸發dragover 事件

  3. 檔案已經在拖曳區,並且放開滑鼠時,觸發drop 事件

實作拖曳上傳,我們只需要關心drop 事件。不過另外兩個事件也需要監聽,目的是阻止瀏覽器預設行為。如果不阻止,那麼把檔案拖曳到瀏覽器時,瀏覽器就會自動下載這個檔案(預設行為),drop 事件觸發不出來。

事件的監聽函數加入在Vue 的methods 物件中:

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() 函數中,透過e.dataTransfer.files 可以拿到使用者拖曳到瀏覽器的檔案的基本訊息,uploadFile() 函數現在只這些資訊列印了出來,可以了解到,拖曳到瀏覽器的每個檔案都是一個File 物件:

3. 處理拖曳事件

現在,我們要為uploadFile() 函數增加功能,實作拖曳檔案時,拖曳區出現檔案名稱和一個上傳進度條。

首先在 Vue 的 data 物件中定義 files 屬性,用來保存所有拖曳到瀏覽器中檔案的名稱。然後在uploadFile() 函數每當被呼叫時,把檔案名稱和上傳進度儲存到 files 中:

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

上傳進度的功能在後面再介紹,先寫一個固定值。

對應地,在HTML程式碼中,用v-for 關鍵字顯示files 的每一項:

<p class="dropbox p-3">
 <h2 class="text-center">把要上传的文件拖动到这里</h2>
 <p class="border m-2 d-inline-block p-4" style="width:15rem" v-for="file in files">
  <h5 class="mt-0">{{ file.name }}</h5>
  <p class="progress">
   <p class="progress-bar progress-bar-striped"
     :style="{ width: file.uploadPercentage+&#39;%&#39; }"></p>
  </p>
 </p>
</p>

而且,「把要上傳的檔案拖曳到這裡」 的提示只在拖曳區沒有檔案的時候才顯示:

55eca8f7610bf82aba9544aa7a15244b把要上傳的檔案拖曳到這裡2e9b454fa8428549ca2e64dfac4625cd

這樣,拖曳效果就有了:

##4.檔案上傳

接下來實作真正的檔案上傳,繼續往uploadFile() 函數加入程式碼:

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

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

這裡用到了FormData,把要上傳的檔案附在了FormData 上,並透過AJAX方式傳送給PHP端。 PHP端程式碼:

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

現在刷新下頁面,把電腦上的兩個檔案拖曳到瀏覽器中,PHP端會接收並儲存檔案到uploads 目錄:

提示:如果拖放時遇到PHP回傳了No file specified,或$_FILES 為NULL 的情況時,有可能是PHP限制了POST請求最大位元組,或是限制了上傳檔案的體積。這時候需要調整下php.ini中的這兩個配置:

post_max_size = 20M // POST请求的最大字节数
upload_max_filesize = 20M // 上传文件的最大体积

進度條的展示

基本的上傳功能完成了,最後我們來完成進度條。每當AJAX請求發送了一段時間的資料時,都會產生一個progress 事件,我們可以監聽progress 事件來知道當前的上傳進度:

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

e.loaded 代表當前AJAX發送了多少字節,e .total 代表AJAX總共要傳送多少位元組。透過這兩個屬性可以計算上傳進度的百分比。

這樣,一個有進度條的檔案拖曳上傳功能就完成了。

附:完整程式碼

<!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 href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" 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>
<p id="app" class="m-5">
  <p class="dropbox p-3">
    <h2 v-if="files.length===0" class="text-center">把要上传的文件拖动到这里</h2>
    <p class="border m-2 d-inline-block p-4" style="width:15rem" v-for="file in files">
      <h5 class="mt-0">{{ file.name }}</h5>
      <p class="progress">
        <p class="progress-bar progress-bar-striped"
           :style="{ width: file.uploadPercentage+&#39;%&#39; }"></p>
      </p>
    </p>
  </p>
</p>
<script>
  new Vue({
    el: &#39;#app&#39;,
    data: {
      files: []
    },
    methods: {
      uploadFile: function (file) {
        var item = {
          name: file.name,
          uploadPercentage: 0
        };
        this.files.push(item);
        var fd = new FormData();
        fd.append(&#39;myFile&#39;, file);
        var xhr = new XMLHttpRequest();
        xhr.open(&#39;POST&#39;, &#39;upload.php&#39;, true);
        xhr.upload.addEventListener(&#39;progress&#39;, 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(&#39;.dropbox&#39;);
      dropbox.addEventListener(&#39;dragenter&#39;, this.onDrag, false);
      dropbox.addEventListener(&#39;dragover&#39;, this.onDrag, false);
      dropbox.addEventListener(&#39;drop&#39;, this.onDrop, false);
    }
  });
</script>
</body>
</html>

上面是我整理給大家的,希望今後會對大家有幫助。

相關文章:

vue中dialog彈框如何實作

Vue 中如何使用compile操作方法

在element ui中有關對話框el-dialog關閉事件(詳細教學)#

以上是在Vue中如何實現帶有進度條的檔案拖曳上傳功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn