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

àì夳堔傛蜴生んèń 2024-04-15 13:34 7阅读 0赞

#### 文章目录 ####

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

![在这里插入图片描述][579a429daf314744b995f37351b46548.gif_pic_center]

> 🎉Element-UI Upload 手动上传文件的实现与优化
> 
> --------------------
> 
>  *  ☆\* o(≧▽≦)o \*☆嗨~我是IT·陈寒🍹
>  *  ✨博客主页：[IT·陈寒的博客][IT]
>  *  🎈该系列文章专栏：[Java学习路线][Java]
>  *  📜其他专栏：[Java学习路线][Java] [Java面试技巧][Java 1] [Java实战项目][Java 2] [AIGC人工智能][AIGC] [数据结构学习][Link 1]
>  *  🍹文章作者技术和水平有限，如果文中出现错误，希望大家能指正🙏
>  *  📜 欢迎大家关注！ ❤️

--------------------

### 引言 ###

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

![在这里插入图片描述][0449da0de4954b17b6d338e027417548.png_pic_center]

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

#### 1.1 安装 Element-UI ####

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

npm install element-ui

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

// 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>` 组件来实现文件上传。以下是一个基本的示例：

<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`方法，你可以在这个方法中进行一些自定义的处理。

![在这里插入图片描述][b0b04861a76a44f8844651f56373b13a.png_pic_center]

### 第二部分：手动上传文件 ###

#### 2.1 手动触发上传 ####

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

<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`方法中进行相应的处理。

<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组件默认是逐个上传的，为了提高效率，可以进行并发上传。

<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组件提供了相应的配置项来实现这些限制。

<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" 
        :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进行文件上传。

--------------------

> 🧸结尾 ❤️ 感谢您的支持和鼓励！ 😊🙏  
> 📜您可能感兴趣的内容：
> 
>  *  【[Java面试技巧][Java 1]】[Java面试八股文 - 掌握面试必备知识（目录篇）][Java_ -]
>  *  【[Java学习路线][Java]】[2023年完整版Java学习路线图][2023_Java]
>  *  【[AIGC人工智能][AIGC]】[Chat GPT是什么，初学者怎么使用Chat GPT，需要注意些什么][Chat GPT_Chat GPT]
>  *  【[Java实战项目][Java 2]】[SpringBoot+SSM实战：打造高效便捷的企业级Java外卖订购系统][SpringBoot_SSM_Java]
>  *  【[数据结构学习][Link 1]】[从零起步：学习数据结构的完整路径][Link 2]
> 
> > ![在这里插入图片描述][d7565cfc032647bfb69e7971731a06a2.gif_pic_center]

[579a429daf314744b995f37351b46548.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/64f336390b6144daace44782e40a8d6f.gif
[IT]: https://blog.csdn.net/qq_43546721?type=blog
[Java]: https://blog.csdn.net/qq_43546721/category_12367981.html
[Java 1]: https://blog.csdn.net/qq_43546721/category_12384780.html?spm=1001.2014.3001.5482
[Java 2]: https://blog.csdn.net/qq_43546721/category_12378614.html?spm=1001.2014.3001.5482
[AIGC]: https://blog.csdn.net/qq_43546721/category_12369819.html?spm=1001.2014.3001.5482
[Link 1]: https://blog.csdn.net/qq_43546721/category_12417284.html?spm=1001.2014.3001.5482
[0449da0de4954b17b6d338e027417548.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/7371e0fe00c04a31881b482991dd0099.png
[b0b04861a76a44f8844651f56373b13a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/7ba507a8a85646549cfe819770547676.png
[Java_ -]: https://blog.csdn.net/qq_43546721/article/details/131832856
[2023_Java]: https://blog.csdn.net/qq_43546721/article/details/131550605
[Chat GPT_Chat GPT]: https://blog.csdn.net/qq_43546721/article/details/131866932
[SpringBoot_SSM_Java]: https://blog.csdn.net/qq_43546721/article/details/132119791
[Link 2]: https://blog.csdn.net/qq_43546721/article/details/132404477
[d7565cfc032647bfb69e7971731a06a2.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/476ab8cadeee4487b6f30d2dd836f5b2.gif