使用ElementUI el-upload實現(xiàn)一次性上傳多個文件

更新時間：2024年08月14日 09:10:25 作者：繁依Fanyi

在日常的前端開發(fā)中,文件上傳是一個非常常見的需求,尤其是在用戶需要一次性上傳多個文件的場景下,ElementUI作為一款非常優(yōu)秀的Vue.js 2.0組件庫,為我們提供了豐富的UI組件,本文介紹了如何使用ElementUI el-upload實現(xiàn)一次性上傳多個文件,需要的朋友可以參考下

引言

在日常的前端開發(fā)中，文件上傳是一個非常常見的需求，尤其是在用戶需要一次性上傳多個文件的場景下。ElementUI作為一款非常優(yōu)秀的Vue.js 2.0組件庫，為我們提供了豐富的UI組件，極大地提升了開發(fā)效率。其中，el-upload組件便是一個功能強大且易于使用的文件上傳組件。

el-upload組件介紹

el-upload是ElementUI提供的文件上傳組件，支持多種文件上傳方式，如普通上傳、拖拽上傳、圖片上傳等。這個組件不僅能滿足單文件上傳的需求，還能輕松實現(xiàn)一次性上傳多個文件。更重要的是，el-upload組件的API設計非常簡潔明了，開發(fā)者可以根據(jù)自己的需求進行靈活配置。

基本用法

在開始講解具體實現(xiàn)之前，我們先來看一下el-upload組件的基本用法。以下是一個簡單的單文件上傳示例：

<template>
  <el-upload
    class="upload-demo"
    action="https://jsonplaceholder.typicode.com/posts/"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :file-list="fileList"
    :auto-upload="false">
    <el-button slot="trigger" size="small" type="primary">選取文件</el-button>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上傳到服務器</el-button>
    <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div>
  </el-upload>
</template>

<script>
  export default {
    data() {
      return {
        fileList: []
      };
    },
    methods: {
      handlePreview(file) {
        console.log(file);
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      submitUpload() {
        this.$refs.upload.submit();
      }
    }
  }
</script>

在這個示例中，我們通過el-upload組件實現(xiàn)了一個簡單的文件上傳功能。action屬性指定了文件上傳的服務器地址，file-list用于管理已選取的文件列表，on-preview和on-remove則分別用于文件預覽和刪除的回調(diào)。

實現(xiàn)多文件上傳

為了實現(xiàn)一次性上傳多個文件，我們只需要在el-upload組件中設置multiple屬性即可。該屬性允許用戶在文件選擇對話框中一次性選取多個文件。以下是一個多文件上傳的示例：

<template>
  <el-upload
    class="upload-demo"
    action="https://jsonplaceholder.typicode.com/posts/"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :file-list="fileList"
    :auto-upload="false"
    multiple>
    <el-button slot="trigger" size="small" type="primary">選取文件</el-button>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上傳到服務器</el-button>
    <div slot="tip" class="el-upload__tip">可以上傳多個文件</div>
  </el-upload>
</template>

<script>
  export default {
    data() {
      return {
        fileList: []
      };
    },
    methods: {
      handlePreview(file) {
        console.log(file);
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      submitUpload() {
        this.$refs.upload.submit();
      }
    }
  }
</script>

在這個示例中，我們添加了multiple屬性，使得文件選擇對話框允許一次性選擇多個文件。這樣，用戶便可以輕松地實現(xiàn)批量上傳。

文件上傳的更多配置

el-upload組件不僅支持多文件上傳，還提供了豐富的配置項，滿足各種文件上傳需求。下面我們詳細介紹一些常用的配置項：

headers 自定義請求頭

在文件上傳時，如果需要添加自定義請求頭，可以通過headers屬性進行配置。以下是一個添加自定義請求頭的示例：

<el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  :headers="{
    Authorization: 'Bearer YOUR_TOKEN'
  }">
</el-upload>

data 上傳附帶參數(shù)

在文件上傳時，如果需要附帶一些額外的參數(shù)，可以通過data屬性進行配置。以下是一個上傳時附帶額外參數(shù)的示例：

<el-upload
  action="https://jsonplaceholder.typicode.com/posts/"
  :data="{
    userId: 123
  }">
</el-upload>

limit 限制上傳文件數(shù)量

如果需要限制上傳文件的數(shù)量，可以通過limit屬性進行配置，并結(jié)合on-exceed事件進行處理。以下是一個限制最多上傳3個文件的示例：

<template>
  <el-upload
    class="upload-demo"
    action="https://jsonplaceholder.typicode.com/posts/"
    :file-list="fileList"
    :limit="3"
    :on-exceed="handleExceed"
    multiple>
    <el-button slot="trigger" size="small" type="primary">選取文件</el-button>
  </el-upload>
</template>

<script>
  export default {
    data() {
      return {
        fileList: []
      };
    },
    methods: {
      handleExceed(files, fileList) {
        this.$message.warning(`當前限制選擇 3 個文件，本次選擇了 ${files.length} 個文件，共選擇了 ${files.length + fileList.length} 個文件`);
      }
    }
  }
</script>

before-upload 上傳前的鉤子

在文件上傳之前，如果需要對文件進行一些處理或校驗，可以使用before-upload鉤子。以下是一個在上傳前進行文件大小校驗的示例：

<template>
  <el-upload
    class="upload-demo"
    action="https://jsonplaceholder.typicode.com/posts/"
    :before-upload="beforeUpload"
    multiple>
    <el-button slot="trigger" size="small" type="primary">選取文件</el-button>
  </el-upload>
</template>

<script>
  export default {
    methods: {
      beforeUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error('上傳文件大小不能超過 2MB!');
        }
        return isLt2M;
      }
    }
  }
</script>

在這個示例中，我們在文件上傳前對文件大小進行了校驗，如果文件大小超過2MB，則會提示錯誤信息并阻止上傳。

拖拽上傳

el-upload組件還支持拖拽上傳功能，用戶可以通過拖拽文件到指定區(qū)域來實現(xiàn)文件上傳。以下是一個拖拽上傳的示例：

<template>
  <el-upload
    class="upload-demo"
    drag
    action="https://jsonplaceholder.typicode.com/posts/"
    multiple>
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">將文件拖到此處，或<em>點擊上傳</em></div>
    <div class="el-upload__tip" slot="tip">支持批量上傳</div>
  </el-upload>
</template>

在這個示例中，我們通過添加drag屬性，使得el-upload組件支持拖拽上傳。用戶可以將文件拖拽到指定區(qū)域，輕松實現(xiàn)文件上傳。

自定義上傳請求

有時，我們可能需要對上傳請求進行更細粒度的控制，例如使用axios等庫進行上傳。el-upload組件提供了http-request鉤子，允許我們自定義上傳請求。以下是一個使用axios自定義上傳請求的示例：

<template>
  <el-upload
    class="upload-demo"
    :http-request="customRequest"
    multiple>
    <el-button slot="trigger" size="small" type="primary">選取文件</el-button>
  </el-upload>
</template>

<script>
  import axios from 'axios';

  export default {
    methods: {
      customRequest({ file, onProgress, onSuccess, onError }) {
        const formData = new FormData();
        formData.append('file', file);

        axios.post('https://jsonplaceholder.typicode.com/posts/', formData, {
          onUploadProgress: (event) => {
            let percent = Math.round((event.loaded * 100) / event.total);
            onProgress({ percent });
          }
        }).then(response => {
          onSuccess(response.data);
        }).catch(error => {
          onError(error);
        });
      }
    }
  }
</script>

在這個示例中，我們使用axios庫自定義了上傳請求。通過http-request鉤子，我們可以完全控制上傳過程，并實現(xiàn)更加靈活的上傳邏輯。

小結(jié)

ElementUI的el-upload組件為我們提供了強大的文件上傳功能，不僅支持單文件上傳，還可以輕松實現(xiàn)一次性上傳多個文件。通過靈活配置組件的各項屬性和鉤子函數(shù)，我們可以滿足各種復雜的文件上傳需求。無論是添加自定義請求頭、上傳附帶參數(shù)，還是限制上傳文件數(shù)量、拖拽上傳，el-upload組件都能輕松應對。

在日常開發(fā)中，我們可以根據(jù)實際需求，對el-upload組件進行更深層次的定制和優(yōu)化，從而提升用戶體驗和系統(tǒng)性能。希望這篇文章能夠幫助大家更好地理解和使用el-upload組件，讓文件上傳變得更加簡單和高效。

以上就是使用ElementUI el-upload實現(xiàn)一次性上傳多個文件的詳細內(nèi)容，更多關(guān)于ElementUI el-upload上傳多個文件的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: