LLM前端项目实践记录-ElementPlus.el.upload组件使用

引言

为实现LLM项目中要求的支持多模态对话的功能，我在input组件中基于element-plus引入了el-upload组件，以使得用户可以上传自定义文件并实现了预览效果。

一、基础用法

引入组件

安装 Element Plus
- 进入项目目录后，通过npm或者yarn安装 Element Plus。
- 使用npm：

npm install element - plus -- save

使用yarn：

yarn add element - plus

完整引入（适用于在整个项目中广泛使用 Element Plus 组件的情况）
- 在项目的入口文件（通常是main.js或者main.ts）中进行如下操作：
  - 引入 Element Plus 和相关样式：

import { createApp } from 'vue';
import ElementPlus from 'element - plus';
import 'element - plus/dist/index.css';
import App from './App.vue';
const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

这里createApp函数创建一个 Vue 应用，app.use(ElementPlus)表示在整个应用中使用 Element Plus 组件，app.mount('#app')将应用挂载到id为app的 DOM 元素上。
按需引入（推荐用于优化项目体积）
- 这种方式只引入项目中实际使用的组件和相关样式，从而减小项目的打包体积。
- 首先，需要安装unplugin - element - plus插件，它可以帮助实现按需引入。
- 使用npm安装：

npm install - D unplugin - element - plus

使用yarn安装：

yarn add - D unplugin - element - plus

然后在vite.config.js（如果是 Vite 构建工具）或者vue.config.js（如果是 Webpack 构建工具）中进行配置：
- Vite 配置示例：

import { defineConfig } from 'vite';
import ElementPlus from 'element - plus';
import AutoImport from 'unplugin - auto - import/vite';
import Components from 'unplugin - components/vite';
import { ElementPlusResolver } from 'unplugin - components/resolvers';
export default defineConfig({
    plugins: [
        // 自动导入Vue相关函数，如ref, reactive等
        AutoImport({
            resolvers: [ElementPlusResolver()],
        }),
        // 自动导入Element Plus组件
        Components({
            resolvers: [ElementPlusResolver()],
        }),
    ],
    resolve: {
        alias: {
            'element - plus': 'element - plus/lib'
        }
    }
});

也可以参考其它引入组件的方式，这里采用的是选项式API的引入方法。其余方法参考Element-plus

基本参数配置
action属性：这是文件上传的接口地址。例如：

<el-upload
    action="/api/upload"
>
    <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

当用户点击按钮后，文件会被上传到/api/upload这个接口。

这里我们是用的CozeNpm自带的上传接口：

如果有自己的后端服务那就改为对应URL路径即可，如果是直接调用CozeNPM。那么可以把action设为# ，然后添加如下参数：

<el-upload
   action="#" :on-change:"cozeUpload"
>

然后自己定义一个cozeUpload函数，在函数内调用coze npm包的上传API即可。

上传文件列表显示
list-type属性可以控制上传文件列表的显示方式。它有以下几种取值：

text：只显示文件名。
picture：如果是图片文件，会显示图片的缩略图；如果是其他文件，显示文件名。
picture-card：以卡片形式显示，图片文件显示缩略图，鼠标悬停会显示操作按钮，其他文件显示文件名和操作按钮。

<el-upload
    action="/api/upload"
    list-type="picture-card"
>
    <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

二、文件限制与钩子函数

文件类型限制
accept属性可以限制上传文件的类型。例如，只允许上传图片文件，可以这样设置：

<el-upload
    action="/api/upload"
    accept="image/*"
>
    <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

它还可以指定更具体的文件类型，如accept="image/jpeg,image/png"，这样就只允许上传 JPEG 和 PNG 格式的图片。

文件大小限制
limit属性用于限制上传文件的数量。例如，限制最多上传 3 个文件：

<el-upload
    action="/api/upload"
    :limit="3"
>
    <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

file-size属性用于限制单个文件的大小，单位是字节。例如，限制单个文件大小不超过 2MB（2 * 1024 * 1024 字节）：

<el-upload
    action="/api/upload"
    :file-size="2 * 1024 * 1024"
>
    <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

钩子函数
before-upload：在文件上传之前触发。这个钩子函数可以用于对文件进行预处理，例如检查文件内容等。它接收上传的文件作为参数，返回true或者Promise。如果返回false或者Promise被拒绝，文件将不会被上传。

<el-upload
    action="/api/upload"
    :before-upload="beforeUploadHandler"
>
    <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

export default {
    methods: {
        beforeUploadHandler(file) {
            // 检查文件大小等操作
            if (file.size > 1024 * 1024) {
                this.$message.error('文件太大');
                return false;
            }
            return true;
        }
    }
};

on-success：文件上传成功后触发。它接收上传后的响应数据、上传的文件和文件列表作为参数。

<el-upload
    action="/api/upload"
    :on-success="onSuccessHandler"
>
    <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

export default {
    methods: {
        onSuccessHandler(response, file, fileList) {
            this.$message.success('上传成功');
            // 可以在这里对响应数据进行处理，如更新页面显示等
        }
    }
};

on-error：文件上传失败时触发，参数包括错误信息、上传的文件和文件列表。

<el-upload
    action="/api/upload"
    :on-error="onErrorHandler"
>
    <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

export default {
    methods: {
        onErrorHandler(error, file, fileList) {
            this.$message.error('上传失败：' + error);
        }
    }
};

三、自定义上传行为

使用http-request属性自定义上传请求
有时候，我们可能需要使用自己的axios或者其他HTTP请求库来进行文件上传，而不是使用组件默认的上传方式。http-request属性允许我们自定义上传的HTTP请求。

<el-upload
    :http-request="customHttpRequest"
>
    <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

export default {
    methods: {
        customHttpRequest(options) {
            // 使用axios进行上传
            axios.post('/api/upload', options.data)
               .then((response) => {
                    options.onSuccess(response.data, options.file, options.fileList);
                })
               .catch((error) => {
                    options.onError(error, options.file, options.fileList);
                });
        }
    }
};

在customHttpRequest方法中，我们接收options参数，这个参数包含了文件数据、上传成功和失败的回调函数等信息，我们可以使用自己的HTTP请求库来发送文件，并在请求成功或失败时调用相应的回调函数。

手动上传文件
可以通过el-upload组件的submit方法来手动触发文件上传。例如，我们有一个按钮，点击这个按钮来上传已经选择的文件：

<el-upload
    ref="upload"
    action="/api/upload"
>
    <el-button size="small" type="primary">选择文件</el-button>
</el-upload>
<el-button @click="manualUpload">手动上传</el-button>

export default {
    methods: {
        manualUpload() {
            this.$refs.upload.submit();
        }
    }
};

这里通过ref属性获取el-upload组件的引用，然后调用submit方法来触发文件上传。

LLM前端项目实践记录-ElementPlus.el.upload组件使用 | 豆包MarsCode AI刷题

引言

一、基础用法

二、文件限制与钩子函数

三、自定义上传行为