开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第26天，点击查看活动详情

写在前面

上篇文章介绍了如何在vite+vue项目中画一个简单的柱状图，本来想写画3D柱状图的教程，工作中正好封装了文件上传，所以在本篇文章中介绍如何在vite+vue项目的后台系统中实现单文件上传并封装组件。

单文件上传

在src\components\UploadFile.vue文件中封装单文件上传，使用element plus的el-upload组件，由于没有后端，所有的实现都是前端模拟，但是基本只需要改一下接口就可以真实使用，完整代码如下。其中beforeRemove为删除前的方法，删除前弹出确认框，询问是否确认删除。handleRemove为删除方法，确认删除后改变fileList的值：fileList.value = uploadFiles。handlePreview为查看方法，点击后下载文件，通过a标签下载。handleHttpRequest为自己写的上传方法，定义一个new FormData()，并将选择的文件插入进去form.append("file", param.file);

<template>
    <el-upload :file-list="fileList" action="action" :on-preview="handlePreview" :on-remove="handleRemove"
        :before-remove="beforeRemove" :http-request="handleHttpRequest"
        accept="jpg, jpeg, png, gif, webp, bmp, txt, pdf, xlsx ,xls ,doc, docx, zip ,rar, ppt, pptx, mp3">
        <el-button type="primary">点击上传</el-button>
        <template #tip>
            <div class="el-upload__tip">
                请上传不超过100M的文件
            </div>
        </template>
    </el-upload>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

import type { UploadProps, UploadUserFile } from 'element-plus'
import { FileUpload } from '@/api/UploadFile'

let fileList = ref<UploadUserFile[]>([
    {
        name: 'element-plus-logo.svg',
        url: 'https://element-plus.org/images/element-plus-logo.svg',
    },
])

const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
    fileList.value = uploadFiles;
}

const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
    const el = document.createElement("a");
    el.style.display = "none";
    el.target = "_blank";
    el.download = uploadFile.name;
    el.href = uploadFile.url || '';
    document.body.appendChild(el);
    el.click();
    document.body.removeChild(el);
}

const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
    return ElMessageBox.confirm(
        `确定删除文件：${uploadFile.name}？`, 'Warning',
    ).then(
        () => {
            ElMessage({
                type: 'success',
                message: '删除成功！',
            })
            return true
        },
        () => false
    )
}

// @ts-ignore
const handleHttpRequest: UploadProps['httpRequest'] = (param) => {
    if (param.file.size > 100 * 1024 * 1024) {
        return ElMessage.error('文件过大！请上传不超过100M的文件')
    }
    let form = new FormData();
    form.append("file", param.file); // 此处file也需要根据后端需要的字段来命名
    setTimeout(() => {
        let obj = {
            name: '后端返回的文件名',
            fileId: '后端返回的文件url',
            ...param,
        };
        param.onSuccess(obj);
        let files = fileList.value;
        files.push(obj);
        fileList.value = files;
        ElMessage({
            message: '上传成功！',
            type: 'success',
        })
    }, 1000)
    // 真实后端用以下接口
    // FileUpload(form).then(res => {
    //     console.log(res)
    //     ElMessage({
    //         message: '上传成功！',
    //         type: 'success',
    //     })
    // })
}
</script>

<style lang="less" scoped>

</style>

写在最后

以上就是在vite+vue项目的后台系统中实现单文件上传并封装组件的所有代码和说明。