返回

巧用 Element-UI 打造独一无二的文件上传体验：自定义列表、自动重传与公共组件锦上添花

前端

为什么需要自定义实现？

Element-UI 作为 Vue.js 生态圈中广受欢迎的前端 UI 框架，其文件上传组件功能强大、使用方便。然而，在某些情况下，原生的 Element-UI 文件上传组件可能无法满足我们的需求，比如：

  • 需要对上传列表进行自定义展示，比如增加缩略图、进度条等元素。
  • 需要在上传失败时自动重传文件。
  • 需要将文件上传组件作为公共组件复用到多个项目中。

为了满足这些需求，我们可以对 Element-UI 的文件上传组件进行自定义实现。

如何实现自定义文件上传列表？

1. 准备工作

在开始自定义文件上传列表之前，我们需要先安装 Element-UI 和 Axios 库。Element-UI 是我们用于构建文件上传组件的框架，而 Axios 是我们用于发送 HTTP 请求的库。

npm install element-ui axios

2. 创建自定义组件

接下来，我们需要创建一个自定义组件来实现文件上传列表。这个组件将包含一个文件上传按钮、一个上传列表和一个进度条。

<template>
  <div>
    <el-button @click="uploadFile">上传文件</el-button>
    <el-upload
      :action="uploadUrl"
      :headers="headers"
      :multiple="true"
      :on-success="handleSuccess"
      :on-error="handleError"
    >
      <el-upload-list v-if="fileList.length > 0">
        <el-upload-list-item
          v-for="file in fileList"
          :key="file.uid"
          :file="file"
          :status="file.status"
        >
          <el-button @click="removeFile(file)">移除</el-button>
        </el-upload-list-item>
      </el-upload-list>
    </el-upload>
    <el-progress :percentage="percentage" v-if="percentage > 0"></el-progress>
  </div>
</template>

<script>
import { ElButton, ElUpload, ElUploadList, ElUploadListItem, ElProgress } from 'element-ui';
import axios from 'axios';

export default {
  components: { ElButton, ElUpload, ElUploadList, ElUploadListItem, ElProgress },
  data() {
    return {
      fileList: [],
      percentage: 0,
      uploadUrl: 'http://localhost:3000/upload',
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    };
  },
  methods: {
    uploadFile() {
      this.$refs.upload.submit();
    },
    handleSuccess(response, file, fileList) {
      this.$message({
        type: 'success',
        message: '文件上传成功'
      });
      this.fileList = fileList;
    },
    handleError(err, file, fileList) {
      this.$message({
        type: 'error',
        message: '文件上传失败'
      });
      this.fileList = fileList;
    },
    removeFile(file) {
      this.fileList = this.fileList.filter(item => item.uid !== file.uid);
    }
  }
};
</script>

3. 使用自定义组件

现在我们可以将自定义的文件上传列表组件添加到我们的项目中。

<template>
  <div>
    <my-upload-list></my-upload-list>
  </div>
</template>

<script>
import MyUploadList from './components/MyUploadList.vue';

export default {
  components: { MyUploadList }
};
</script>

如何实现自动重传？

为了实现自动重传，我们需要在上传失败时重新发送 HTTP 请求。我们可以使用 Axios 库的 interceptors 功能来实现这一目标。

// 在 main.js 中
import axios from 'axios';

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做些什么
  return response;
}, function (error) {
  // 对响应错误做些什么
  if (error.response && error.response.status === 401) {
    // 如果是 401 未授权错误，则重新登录并重试请求
    // ...
  }
  return Promise.reject(error);
});

如何将文件上传组件作为公共组件复用？

为了将文件上传组件作为公共组件复用，我们需要将其注册为 Vue.js 组件。

// 在 main.js 中
import MyUploadList from './components/MyUploadList.vue';

// 注册为 Vue.js 组件
Vue.component('my-upload-list', MyUploadList);

现在我们就可以在任何 Vue.js 项目中使用 my-upload-list 组件了。

结语

通过自定义 Element-UI 的文件上传组件，我们可以实现更加灵活、实用的文件上传体验。本文介绍了如何实现自定义文件上传列表、自动重传和公共组件复用，希望对你有帮助。