VUE3+ElementPlus如何实现文件上传

最新推荐文章于 2025-03-27 11:24:02 发布

雪山上的小灰熊

最新推荐文章于 2025-03-27 11:24:02 发布

阅读量1.9w

点赞数 11

文章标签： vue3 elementplus upload 上传图片 typescript

本文链接：https://blog.csdn.net/u012885136/article/details/124117298

版权

这篇博客详细介绍了如何在Vue3项目中使用ElementPlus的el-upload组件进行单张图片上传。通过设置`:action`、`:http-request`等属性，并结合typescript实现上传前的校验和上传成功后的处理。同时，还提供了`handleExceed`函数限制上传数量，以及`beforeUpload`函数检查文件类型和大小。服务端的处理将在后续更新中分享。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

VUE3+ElementPlus如何实现文件上传

使用elementplus 中的组件 el-upload

以上传单张图片为例：

使用el-upload

<el-upload
    ref="uploadFile"
    action='#'
    :http-request="uploadAction"
    :on-exceed="handleExceed"
    :limit="1"
    :show-file-list="false"
    :auto-upload="true"
    :before-upload="beforeUpload" style="width: 100%;" class="left-view">
    <img v-if="bannerUrl" :src="bannerUrl" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
</el-upload>

ts实现

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue';
import type { UploadRawFile, UploadFile, FormInstance, Action } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { uploadImage } from '../../apis/project';
export default defineComponent({
    name: 'BanaerManage',
    components: {},
    setup() {
        const uploadFile = ref();
        const state = reactive({
            bannerUrl: '',
            fileList: [],
            fileName: '',
        })

        const handleExceed = (files: File[], fileList: UploadFile[]) => {
            if (state.fileList.length >= 1) {
                ElMessage.error('只能上传一个图片')
                return;
            }
        }

        const beforeUpload = (file: UploadRawFile) => {
            const type = ['image/jpeg', 'image/jpg', 'image/png']
            if (type.indexOf(file.type) === -1) {
                ElMessage.error('上传的文件必须是JPG、JPEG、PNG三种之一!')
                return false
            } else if (file.size / 1024 / 1024 > 2) {
                ElMessage.error('图片大小不能超过2MB!')
                return false
            }
            return true
        }

        const uploadAction = (option: any) => {
            let param = new FormData();
            param.append('file', option.file);
            uploadImage(param).then((res: any) => {
                if (res && res.code === 0) {
                    state.fileName = res.data.fileName;
                    state.bannerUrl = res.data.imageUrl;
                    ElMessage.success('图片上传成功！');
                } else {
                    if (res && res.msg) {
                        ElMessage.error(res.msg);
                    } else {
                        ElMessage.error('图片上传失败！');
                    }
                }
            })
        }

        return {
            ...toRefs(),
            uploadFile,
            uploadAction,
            beforeUpload,
            handleExceed
        }
    }
})

简单实现场景，服务端我是用nodejs实现的，后面给大家更新一下nodejs+koa2实现如何接收文件

谢谢