Vueel-Upload上傳控制項詳細介紹

Vuel-Upload是一個基於Vue.js的簡單易用的上傳組件，它支持多文件上傳，同時包括整個上傳過程的展示。

一、大文件傳輸

在現實場景中，我們常常需要上傳一些比較大的文件，比如大型視頻、音頻等。Vueel-Upload組件支持文件分片上傳，並提供了顯示上傳進度和暫停/恢復上傳功能的API，以便用戶可以跟蹤和控制上傳進度。

示例代碼如下：

<template>
  <div>
    <vueel-upload
      :action="uploadUrl"
      :on-upload-success="onUploadSuccess"
      :on-upload-failure="onUploadFailure"
      :on-upload-progress="onUploadProgress"
      :is-show-upload-progress-bar="true"
      :is-show-upload-stop-button="true"
      :is-show-upload-delete-button="true"
      :max-file-size="50 * 1024 * 1024"
      :chunk-size="2 * 1024 * 1024"
      :chunk-retries="3"
    />
  </div>
</template>

<script>
import VueelUpload from 'vueel-upload';

export default {
  components: { VueelUpload },
  data() {
    return {
      uploadUrl: '/api/upload',
    };
  },
  methods: {
    onUploadSuccess(response) {
      console.log(response);
      // 處理上傳成功的邏輯
    },
    onUploadFailure(error) {
      console.log(error);
      // 處理上傳失敗的邏輯
    },
    onUploadProgress(progress) {
      console.log(progress);
      // 更新上傳進度
    },
  },
};
</script>

上述示例中，我們指定了上傳文件的URL，同時配置了一些關鍵的上傳參數：

• :is-show-upload-progress-bar="true"：控制是否展示上傳進度條
• :is-show-upload-stop-button="true"：控制是否展示暫停上傳的按鈕
• :is-show-upload-delete-button="true"：控制是否展示刪除上傳的文件的按鈕
• :max-file-size="50 * 1024 * 1024"：指定了上傳文件的最大大小為50MB
• :chunk-size="2 * 1024 * 1024"：指定了將文件分成的塊的大小為2MB
• :chunk-retries="3"：指定了每個上傳塊的最大重試次數為3

二、百度網盤上傳文件選取

作為一個前端開發人員，你往往需要將用戶選擇的文件上傳到伺服器上。容易如百度網盤模板化的上傳文件選取需要框架的支持， Vueel-Upload正好滿足這個需求，並且具有豐富的可自定義選項可供選擇。

示例代碼如下：

<template>
  <div>
    <vueel-upload
      :action="uploadUrl"
      :on-upload-success="onUploadSuccess"
      :on-upload-failure="onUploadFailure"
      :on-upload-progress="onUploadProgress"
      :is-show-upload-progress-bar="true"
      :is-show-upload-stop-button="true"
      :is-show-upload-delete-button="true"
      :accept="[{ extensions: 'jpg,jpeg,gif,png', mimeTypes: 'image/jpeg,image/png,image/gif' }]"
      :auto-upload="false"
      ref="upload"
    >
      <el-button slot="trigger" size="mini">上傳文件</el-button>
    </vueel-upload>
    <el-button size="mini" @click="selectFile" :disabled="uploading">選擇文件</el-button>
    <el-button size="mini" @click="upload" :disabled="uploading">上傳文件</el-button>
  </div>
</template>

<script>
import VueelUpload from 'vueel-upload';
import { ElButton } from 'element-ui';

export default {
  components: { VueelUpload, ElButton },
  data() {
    return {
      uploadUrl: '/api/upload',
      uploading: false,
    };
  },
  methods: {
    onUploadSuccess(response) {
      console.log(response);
      // 處理上傳成功的邏輯
      this.uploading = false;
    },
    onUploadFailure(error) {
      console.log(error);
      // 處理上傳失敗的邏輯
      this.uploading = false;
    },
    onUploadProgress(progress) {
      console.log(progress);
      // 更新上傳進度
    },
    selectFile() {
      this.$refs.upload.select();
    },
    upload() {
      this.$refs.upload.upload();
      this.uploading = true;
    },
  },
};
</script>

上述示例中，我們為Vueel-Upload組件指定了一個上傳URL，並且指定了允許上傳的文件類型和大小等選項。在Vue組件中，我們使用了element-ui的按鈕組件來觸發文件選擇和上傳操作，同時使用了Vue的ref屬性來引用Vueel-Upload組件的實例，以便在JavaScript代碼中控制文件上傳和選擇操作。

三、自定義展示模板

有時我們需要在上傳的文件上顯示一些自定義的信息，比如文件名、上傳進度等。 Vueel-Upload組件提供了一些自定義展示模板的選項，以幫助我們實現這一目標。

示例代碼如下：

<template>
  <div>
    <vueel-upload
      :action="uploadUrl"
      :on-upload-success="onUploadSuccess"
      :on-upload-failure="onUploadFailure"
      :on-upload-progress="onUploadProgress"
      :is-show-upload-progress-bar="true"
      :is-show-upload-stop-button="true"
      :is-show-upload-delete-button="true"
      :accept="[{ extensions: 'jpg,jpeg,gif,png', mimeTypes: 'image/jpeg,image/png,image/gif' }]"
      :auto-upload="false"
      ref="upload"
      :file-list="fileList"
      :list-type="'text'"
    >
      <el-button slot="trigger" size="mini">上傳文件</el-button>
      <div slot-scope="{ file, fileList }">
        <p>文件名稱: {{ file.name }}</p>
        <p>文件大小: {{ file.size }}</p>
        <p>上傳進度: {{ file.percent }}%</p>
      </div>
    </vueel-upload>
    <el-button size="mini" @click="selectFile" :disabled="uploading">選擇文件</el-button>
    <el-button size="mini" @click="upload" :disabled="uploading">上傳文件</el-button>
  </div>
</template>

<script>
import VueelUpload from 'vueel-upload';
import { ElButton } from 'element-ui';

export default {
  components: { VueelUpload, ElButton },
  data() {
    return {
      uploadUrl: '/api/upload',
      uploading: false,
      fileList: [],
    };
  },
  methods: {
    onUploadSuccess(response) {
      console.log(response);
      // 處理上傳成功的邏輯
      this.uploading = false;
    },
    onUploadFailure(error) {
      console.log(error);
      // 處理上傳失敗的邏輯
      this.uploading = false;
    },
    onUploadProgress(progress) {
      console.log(progress);
      // 更新上傳進度
    },
    selectFile() {
      this.$refs.upload.select();
    },
    upload() {
      this.$refs.upload.upload();
      this.uploading = true;
    },
  },
};
</script>

在上述示例中，我們使用了Vue自定義插槽的方式來實現對文件信息的展示。我們將Vueel-Upload的展示模板類型設為了”text”，然後在插槽中根據文件信息來展示相應的文本內容，從而實現了自定義展示模板的目標。