Element-UI Upload 手动上传文件的实现与优化

IT·陈寒2023-11-28 11:52

文章目录

    • 引言
    • [第一部分：Element-UI Upload 基本用法](#第一部分：Element-UI Upload 基本用法)
      • [1.1 安装 Element-UI](#1.1 安装 Element-UI)
      • [1.2 使用 `<el-upload>` 组件](#1.2 使用 <el-upload> 组件)
    • 第二部分：手动上传文件
      • [2.1 手动触发上传](#2.1 手动触发上传)
      • [2.2 手动上传时的文件处理](#2.2 手动上传时的文件处理)
    • 第三部分：性能优化
      • [3.1 并发上传](#3.1 并发上传)
      • [3.2 文件上传限制](#3.2 文件上传限制)
    • 结语

🎉Element-UI Upload 手动上传文件的实现与优化

引言

在Web开发中，文件上传是一个常见的需求。Element-UI作为一套优秀的Vue组件库，提供了丰富的上传组件，其中<el-upload>就是用于文件上传的组件。本文将重点介绍如何使用Element-UI的Upload组件进行手动文件上传，以及在实际应用中的一些优化策略。

第一部分：Element-UI Upload 基本用法

1.1 安装 Element-UI

首先，确保你的项目中已经安装了Element-UI。如果没有安装，可以使用以下命令进行安装：

bash 复制代码 
npm install element-ui

然后，在项目中引入Element-UI：

javascript 复制代码 
// main.js
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

1.2 使用 <el-upload> 组件

在你的Vue组件中，使用 <el-upload> 组件来实现文件上传。以下是一个基本的示例：

vue 复制代码 
<template>
  <el-upload
    class="upload-demo"
    action="/upload"
    :show-file-list="false"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
  >
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleSuccess(response, file, fileList) {
      // 文件上传成功的回调
      console.log(response);
    },
    beforeUpload(file) {
      // 在上传之前的钩子，返回 false 可以取消上传
      console.log(file);
      return true;
    },
  },
};
</script>

<style scoped>
/* 根据实际情况调整样式 */
.upload-demo {
  display: inline-block;
}
</style>

上述代码中，我们通过<el-upload>组件实现了一个点击上传的按钮。在文件上传成功后，会触发handleSuccess方法；在上传之前，会触发beforeUpload方法，你可以在这个方法中进行一些自定义的处理。

第二部分：手动上传文件

2.1 手动触发上传

有时候，我们希望通过点击按钮的方式手动触发文件上传，而不是选择文件后自动上传。Element-UI提供了uploadFiles方法来实现手动上传。

vue 复制代码 
<template>
  <el-upload
    ref="upload"
    class="upload-demo"
    action="/upload"
    :show-file-list="false"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
  >
    <el-button size="small" type="primary" @click="manualUpload">手动上传</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleSuccess(response, file, fileList) {
      // 文件上传成功的回调
      console.log(response);
    },
    beforeUpload(file) {
      // 在上传之前的钩子，返回 false 可以取消上传
      console.log(file);
      return true;
    },
    manualUpload() {
      // 手动触发文件上传
      this.$refs.upload.submit();
    },
  },
};
</script>

通过上述代码，我们添加了一个"手动上传"按钮，并在点击按钮时调用manualUpload方法，该方法内通过this.$refs.upload.submit()手动触发文件上传。

2.2 手动上传时的文件处理

在手动上传的场景中，我们可能希望在上传之前进行一些文件处理，比如压缩、格式转换等。为了实现这一点，我们可以在beforeUpload方法中进行相应的处理。

vue 复制代码 
<template>
  <el-upload
    ref="upload"
    class="upload-demo"
    action="/upload"
    :show-file-list="false"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
  >
    <el-button size="small" type="primary" @click="manualUpload">手动上传</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleSuccess(response, file, fileList) {
      // 文件上传成功的回调
      console.log(response);
    },
    beforeUpload(file) {
      // 在上传之前的钩子，返回 false 可以取消上传
      console.log(file);

      // 手动进行文件处理，比如压缩、格式转换等

      return true;
    },
    manualUpload() {
      //

 手动触发文件上传
      this.$refs.upload.submit();
    },
  },
};
</script>

在beforeUpload方法中，你可以获取到当前待上传的文件对象file，在这里进行自定义的文件处理。处理完成后，返回 true 表示允许上传，返回 false 表示取消上传。

第三部分：性能优化

3.1 并发上传

在实际应用中，可能会遇到需要一次性上传多个文件的情况。Element-UI的Upload组件默认是逐个上传的，为了提高效率，可以进行并发上传。

vue 复制代码 
<template>
  <el-upload
    ref="upload"
    class="upload-demo"
    action="/upload"
    :show-file-list="false"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    :http-request="customRequest"
    :on-remove="handleRemove"
  >
    <el-button size="small" type="primary" @click="manualUpload">手动上传</el-button>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: [], // 用于存储文件列表
    };
  },
  methods: {
    handleSuccess(response, file, fileList) {
      // 文件上传成功的回调
      console.log(response);
    },
    beforeUpload(file) {
      // 在上传之前的钩子，返回 false 可以取消上传
      console.log(file);

      // 手动进行文件处理，比如压缩、格式转换等

      return true;
    },
    customRequest(option) {
      // 自定义上传函数，用于并发上传
      const formData = new FormData();
      formData.append('file', option.file);
      
      // 可以在这里添加其他参数
      // formData.append('name', 'file');

      // 发送请求
      this.$axios.post(option.action, formData)
        .then(response => {
          option.onSuccess(response, option.file, this.fileList);
        })
        .catch(error => {
          option.onError(error, option.file, this.fileList);
        });
    },
    handleRemove(file, fileList) {
      // 文件移除时的回调
      console.log(file, fileList);
    },
    manualUpload() {
      // 手动触发文件上传
      this.$refs.upload.submit();
    },
  },
};
</script>

在上述代码中，我们使用了http-request属性来指定自定义的上传函数customRequest，通过这个函数实现了并发上传。同时，我们使用fileList来存储上传的文件列表，以便在文件移除时进行相应的处理。

3.2 文件上传限制

在一些场景中，可能需要对文件上传进行一些限制，比如文件大小、文件类型等。Element-UI的Upload组件提供了相应的配置项来实现这些限制。

vue 复制代码 
<template>
  <el-upload
    ref="upload"
    class="upload-demo"
    action="/upload"
    :show-file-list="false"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    :http-request="customRequest"
    :on-remove="handleRemove"
    :file-list="fileList"
    :limit="3" <!-- 限制上传文件的数量 -->
    :max-size="1024" <!-- 限制文件大小，单位为 KB -->
    :accept="'image/*'" <!-- 限制上传文件的类型 -->
  >
    <el-button size="small" type="primary" @click="manualUpload">手动上传</el-button>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: [], // 用于存储文件列表
    };
  },
  methods: {
    // ...（其他方法同上）
  },
};
</script>

通过配置limit、max-size和accept等属性，可以限制上传文件的数量、大小和类型。这样可以有效控制用户上传的文件符合预期。

结语

通过本文的介绍，我们学习了如何使用Element-UI的Upload组件实现文件的手动上传，包括手动触发上传和上传前的文件处理。在实际应用中，结合性能优化的一些策略，可以更好地满足项目的需求。同时，合理设置上传限制，增加用户体验和系统安全性。希望本文能够帮助你更好地使用Element-UI进行文件上传。

🧸结尾 ❤️ 感谢您的支持和鼓励！ 😊🙏

📜您可能感兴趣的内容：

相关推荐
～央千澈～13 小时前
优雅草央千澈-关于蓝湖如何快速的标注交互原型是如何使用的-如何使用蓝湖设计交互原型和整个软件项目的流程逻辑-实践项目详细说明
ui·交互·蓝湖
军训猫猫头18 小时前
20.抽卡只有金，带保底（WPF） C#
ui·c#·wpf
wuningw19 小时前
ant-design-ui的Select选择器多选时同时获取label与vaule值
ui·arcgis
SoraLuna1 天前
「Mac畅玩鸿蒙与硬件47」UI互动应用篇24 - 虚拟音乐控制台
开发语言·macos·ui·华为·harmonyos
晓纪同学1 天前
QT创建一个模板槽和信号刷新UI
开发语言·qt·ui
程序视点2 天前
【安全漏洞】Vue UI库Vant组件遭恶意投毒，字节RspacK也中招！请紧急修复！
前端·vue.js·ui
m0_748238783 天前
前端使用 Konva 实现可视化设计器（20）- 性能优化、UI 美化
前端·ui·性能优化
m0_748239333 天前
随手记录第十四话 -- 在 Spring Boot 3.2.3 中使用 springdoc-openapi-starter-webmvc-ui
spring boot·后端·ui
Ke-Di3 天前
Unity-URP设置单独渲染UI相机
ui·unity
Tester_孙大壮3 天前
从想法到实践：Excel 转 PPT 应用的诞生之旅
ui·powerpoint·excel
热门推荐
01Cube-Studio：开源大模型全链路一站式中台02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问07构建高效的广告投放系统：应用架构的设计与实现08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10【一文读懂】NTN（非地面网络）技术介绍