前端上传文件组件封装（element plus+vue3）

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

海豹先生_

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

阅读量520

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_57956183/article/details/135222359

版权

本文介绍了一个使用Vue和Element-Plus库实现的文件上传功能，重点在于如何处理xlsx格式文件并限制其大小不超过150MB。

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

话不多说，直接上代码：

<template>
    <div style="min-height: 150px;">
        <!-- 文件上传开始 -->
        <div>
            <el-form :model="form" ref="formEl" :rules="rulesForm">
                <div class="toupload" >
                    <div>附件：</div>
                    <div v-if="showFileName">
                        <el-tooltip :content="fileList[0]?.name" placement="top">
                            <div class="file-box">
                                <icon-doc-detail fill="#999"></icon-doc-detail>
                                <span class="file-name">{{fileList[0]?.name}}</span>
                                <icon-delete fill="#999" @click="removeFile"></icon-delete>
                            </div>
                        </el-tooltip>
                    </div>
                    <el-upload class="upload"
                        :show-file-list="false" 
                        accept=".xlsx"
                        :http-request="uploadFile" 
                        :before-upload="beforeUpload" 
                        action="" 
                        limit="1"   
                        :file-list="fileList" 
                        :on-exceed="exceedFile">
                        <template #trigger>
                            <el-button type="primary">文件上传</el-button>
                        </template>
                    </el-upload>

                </div>
                <div style="margin-top:20px">仅支持xlsx格式，最大不超过150M。</div>
                <div style="text-align:end;margin-top:50px">
                    <el-button size="mini" type="primary">导入</el-button>
                    <el-button size="mini" @click="cancel">取 消</el-button>
                </div>
            </el-form>
        </div>
        <!-- 文件上传结束 -->
  
    </div>
</template>

<script setup>
import { ref, reactive, defineProps, defineEmits,nextTick  } from 'vue';
import { ElNotification} from 'element-plus'

let fileList = ref([])
let showFileName = ref(false)

const that = reactive({
    fileList: [],
    file: {}
})

// 上传之前
function beforeUpload(file) {
    const fileSize = file.size / 1024 / 1024 > 150
    if (fileSize) {
        ElNotification({
            title: '警告',
            message: '文件最大不超过150M!',
            type: 'warning',
        })
    }
}
// 上传
function uploadFile(file) {
    that.file = file
    fileList.value = [{name:file.file.name}]
    showFileName.value = true
}
// 二次上传覆盖
function exceedFile(file){
    fileList.value = [{name:file[0].name}]
    that.file = file
}
function change(file, fileList) {
    that.file = file
}
// 删除文件
function removeFile() {
    showFileName.value = false;
    fileList.value = []
    that.file = {}
}
// 取消
function cancel() {
    emits('closeUploadDialog', false)
}

</script>