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"，然后在插槽中根据文件信息来展示相应的文本内容，从而实现了自定义展示模板的目标。