以自定义上传提升 el-upload 用户体验

我们常在使用 el-upload 时遇到一些不便之处，于是提出了自定义上传的解决方案。

默认 el-upload 的局限性

默认的 el-upload 在使用上存在一些问题：

• 功能受限： 只允许上传特定类型的文件。
• 体验不佳： 上传过程中缺少进度反馈。

自定义上传的优势

自定义上传通过修改 httpRequest 方法，提供了以下优势：

• 上传类型自定义： 允许上传任意类型的文件。
• 进度实时反馈： 上传进度可以通过回调函数实时反馈给用户。
• 错误处理更灵活： 可以自定义错误处理逻辑，为用户提供更友好的提示。

自定义上传配置

以下是如何配置自定义上传：

import { ref } from 'vue';
import axios from 'axios';

export default {
  components: {
    ElUpload: require('element-ui/lib/upload').default,
  },
  setup() {
    const file = ref(null);

    const customUpload = (options) => {
      const formData = new FormData();
      formData.append('file', file.value);

      axios.post(options.action, formData, {
        onUploadProgress: (event) => {
          options.onProgress(event.loaded, event.total);
        },
      }).then((res) => {
        options.onSuccess(res.data);
      }).catch((err) => {
        options.onError(err);
      });
    };

    return {
      file,
      customUpload,
    };
  },
};

限制文件类型上传

为了限制只能上传 PDF 文件，可以在 httpRequest 中添加以下代码：

if (file.type !== 'application/pdf') {
  throw new Error('只允许上传 PDF 文件');
}

总结

自定义上传功能大大提升了 el-upload 的用户体验。通过修改 httpRequest 方法，我们可以自定义上传类型、实时反馈上传进度以及灵活处理错误。限制文件上传类型也是一项有用的功能，可以确保只上传特定格式的文件。