Vue3+ElementPlue文件批量上传(自定义上传列表)

最新推荐文章于 2024-01-18 21:25:02 发布
最新推荐文章于 2024-01-18 21:25:02 发布
阅读量5.5k 收藏 18
点赞数 2
分类专栏： Vue 学习总结 文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42436422/article/details/126378643
版权

目录

上传功能的拆解

上传组件

选择图片

文件列表组件

文件列表操作

上传逻辑

完整代码

开发过程中遇到的问题及解决方案

需求：批量图片上传，可在列表中多选或全选，上传时可浏览进度，完成后清空列表。后端接口限制15张图片请求一次，前端限制一次最多选择三百张图片

技术栈：vue3+element-plus

上传功能的拆解

上传组件

基于element-plus的el-upload组件

<!-- 按钮上传组件 -->
<el-upload
    class="upload-s"
    :action="flgs.uploadUrl"
    :show-file-list="false"
    multiple
    :auto-upload="false"
    ref="uploadRef"
    :on-change="waitFileChange"
    accept=".jpg, .png, .JPG, .PNG, .jpeg, .JPEG"
>
    <el-button :icon="Plus"></el-button>
</el-upload>
<!-- 拖拽上传组件 -->
        <el-upload
            class="upload-s"
            :drag="flgs.isDrag"
            v-show="flgs.isDrag"
            :action="flgs.uploadUrl"
            :show-file-list="false"
            multiple
            :auto-upload="false"
            ref="uploadRef"
            :on-change="waitFileChange"
            accept=".jpg, .png, .JPG, .PNG, .jpeg, .JPEG"
        >
            <el-icon class="el-icon--upload" v-show="flgs.isDrag"><upload-filled /></el-icon>
            <div class="el-upload__text" v-show="flgs.sDrag">
                Drop file here or
                <em>click to upload</em>
            </div>
            <template #tip>
                <div class="el-upload__tip"></div>
            </template>
        </el-upload>

选择图片

使用组件中的on-change属性获选择的所有图片

注：使用on-cahnge获取多选图片时，每次图片变化都会被调用，如果只想获取一次则使用一个定时器获取到最后一次选择的图片

// 文件变化Handle
const waitFileChange = (file: any, fileList: any[]) => {
    let cLength = fileList.length;
    flgs.value.maxLength = Math.max(cLength, flgs.value.maxLength);
    // 防止多次执行change
    setTimeout(() => {
        //防止函数多次调用后赋值错误
        if (cLength !== flgs.value.maxLength) return;
        flgs.value.maxLength = null;
        //限制单次选择最大数为300
        if (fileList.length > 300) {
            alertMsg('error', '单次上传文件最大数量为300');
            waitFileList.value = fileList.splice(0, 300);
        } else {
            waitFileList.value = fileList;
        }
        //计算文件大小
        fileList = fileList.map(x => ({
            ...x,
            newSize: `${(x.size / Math.pow(1024, 2)).toFixed(2)}M`
        }));
   
    }, 0);
};

文件列表组件

文件列表绑定的数据为on-change所选择的数据

<!-- 文件列表 -->
        <el-table
            class="u-table"
            @selection-change="handleSelectionChange"
            stripe
            :data="waitFileList"
            v-show="flgs.isDone"
            width="100%"
        >
            <el-table-column type="selection" align="center" width="50" />
            <el-table-column
                prop="name"
                label="文件名"
                align="center"
                show-overflow-tooltip
                width="100"
            />

            <el-table-column
                prop="newSize"
                label="文件大小"
                align="center"
                width="100"
                show-overflow-tooltip
            />
            <el-table-column label="" align="center" width="60">
                <template #default="scope">
                    <el-icon @click="deleteRow(scope.row.uid, uploadRef)" class="adpIcon cursor-p">
                        <svg-icon name="delete"></svg-icon>
                    </el-icon>
                </template>
            </el-table-column>
        </el-table>

文件列表操作

注：在删除文件列表数据的同时，需要删除el-upload自带的文件列表区域(删除el-upload的数据列表后数据存在，但是无法看到)

// 删除列表
function deleteRow(uid: number, uploadRef: any) {
    waitFileList.value = waitFileList.value.filter(x => x.uid != uid);
    //删除el-upload自带的数据
    uploadRef.handleRemove(waitFileList.value);
}
// 表格选中的数据
function handleSelectionChange(fileList: any[]) {
    selectedFile.value = fileList;
    // 预防分割导致数据变化
    flgs.value.selectedFile = deepCopy(fileList)
}

上传逻辑

function uploadBegin(uploadRef: any) {
    // 前置条件
    if (!flgs.value.projectId) return alertMsg('warning', '请选择批次');
    if (selectedFile.value.length == 0) return alertMsg('warning', '请选择要上传的文件');
    // loading
    flgs.value.processFlgs = true;
    // 十五张图片一次请求，使用步长为1表示测试状态下一张图片请求一次
    for (let i: number = 0; i < flgs.value.selectedFile.length; i += 1) {
        // 每次添加后删除原有数据
        let uploadFile: any[] = selectedFile.value.splice(0,selectedFile.value.length<1 ? selectedFile.value.length : 1);
        //调用上传API
        uploadAPI(uploadFile,uploadRef)
    }
}
function uploadAPI(list: any[], uploadRef: any) {
    const formData = new FormData();
    formData.append('projectId', flgs.value.projectId);
    //把文件流使用formData格式发送
    list.forEach(x => {
        formData.append('files', x.raw);
    });
    postFormData(DataM.upload, formData).then(res => {
        flgs.value.count++
        // 进度条数据
        flgs.value.processNum = ((flgs.value.count) / flgs.value.selectedFile.length) * 100;
        // 上传完成时初始化数据
        if (flgs.value.processNum == 100) {
            flgs.value.processFlgs = false;
            flgs.value.count = 0
            //过滤上传列表中已上传的数据
            waitFileList.value = deWeight(waitFileList.value,flgs.value.selectedFile)
            //清除el-upload组件中的已上数据(重点)
            uploadRef.handleRemove(flgs.value.selectedFile);
            alertMsg('success', '上传成功' || res.message);
        }
    });
}

完整代码

<template>
    <div class="right-container radius-md">
        <div class="u-header el-row is-justify-space-between t-config filter flex radius-md q-pa-md">
            <div class="header-font">上传列表</div>
            <div class="right-fun el-row is-justify-space-between flex">
                <el-upload
                    class="upload-s"
                    :action="flgs.uploadUrl"
                    :show-file-list="false"
                    multiple
                    :auto-upload="false"
                    ref="uploadRef"
                    :on-change="waitFileChange"
                    accept=".jpg, .png, .JPG, .PNG, .jpeg, .JPEG"
                >
                    <el-button :icon="Plus"></el-button>
                </el-upload>
            </div>
        </div>
        <!-- 文件列表 -->
        <el-table
            class="u-table"
            @selection-change="handleSelectionChange"
            stripe
            :data="waitFileList"
            v-show="flgs.isDone"
            width="100%"
        >
            <el-table-column type="selection" align="center" width="50" />
            <el-table-column
                prop="name"
                label="文件名"
                align="center"
                show-overflow-tooltip
                width="100"
            />

            <el-table-column
                prop="newSize"
                label="文件大小"
                align="center"
                width="100"
                show-overflow-tooltip
            />
            <el-table-column label="" align="center" width="60">
                <template #default="scope">
                    <el-icon @click="deleteRow(scope.row.uid, uploadRef)" class="adpIcon cursor-p">
                        <svg-icon name="delete"></svg-icon>
                    </el-icon>
                </template>
            </el-table-column>
        </el-table>
        <!-- loading -->
        <div
            class="el-loading-mask"
            style="background-color: rgb(122, 122, 122, 0.8); z-index: 1026"
            v-if="flgs.processFlgs"
        >
            <div class="el-loading-spinner">
                <el-progress
                    color=" #B0C4DE"
                    type="circle"
                    :show-text="false"
                    :stroke-width="5"
                    :percentage="flgs.processNum"
                    status="exception"
                ></el-progress>
                <p class="el-loading-text" style="color: #b0c4de">正在上传...</p>
            </div>
        </div>
        <!-- 拖拽上传区域 -->
        <el-upload
            class="upload-s"
            :drag="flgs.isDrag"
            v-show="flgs.isDrag"
            :action="flgs.uploadUrl"
            :show-file-list="false"
            multiple
            :auto-upload="false"
            ref="uploadRef"
            :on-change="waitFileChange"
            accept=".jpg, .png, .JPG, .PNG, .jpeg, .JPEG"
        >
            <el-icon class="el-icon--upload" v-show="flgs.isDrag"><upload-filled /></el-icon>
            <div class="el-upload__text" v-show="flgs.sDrag">
                Drop file here or
                <em>click to upload</em>
            </div>
            <template #tip>
                <div class="el-upload__tip"></div>
            </template>
        </el-upload>
        <div class="r-bottom">
            <el-select clearable v-model="flgs.projectId" placeholder="请选择批次" class="pa-md">
                <el-option
                    v-for="item in projectList"
                    :key="item.id"
                    :label="item.companyName"
                    :value="item.id"
                />
            </el-select>
            <div class="right-fun pa-md">
                <el-button @click="uploadBegin(uploadRef)">开始上传</el-button>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch, defineAsyncComponent } from 'vue';
import { postData, postFormData } from '@/api/http';
import { DataM } from '@/api/api-list';
import { alertMsg, deWeight, deepCopy } from '@/util';
import { Plus, UploadFilled } from '@element-plus/icons-vue';

const props = defineProps({
    projectList:Array,
    default:[]
})
const uploadRef = ref();
const waitFileList = ref([] as any[]);
const selectedFile = ref([] as any[]);
const flgs = ref({
    isDone: false,
    isDrag: true,
    uploadUrl: '',
    projectId: null,
    maxLength: null,
    selectedFile:[],
    processNum: 0,
    processFlgs: false,
    count:0
});

watch(
    () => waitFileList.value,
    () => {
        flgs.value.isDone = waitFileList.value.length > 0 ? true : false;
        flgs.value.isDrag = !flgs.value.isDone;
    }
);

// 文件变化Handle
const waitFileChange = async (file: any, fileList: any[]) => {
    let cLength = fileList.length;
    flgs.value.maxLength = Math.max(cLength, flgs.value.maxLength);
    // 防止多次执行change
    setTimeout(() => {
        if (cLength !== flgs.value.maxLength) return;
        flgs.value.maxLength = null;
        if (fileList.length > 300) {
            alertMsg('error', '单次上传文件最大数量为300');
            waitFileList.value = fileList.splice(0, 300);
        } else {
            waitFileList.value = fileList;
        }
        fileList = fileList.map(x => ({
            ...x,
            newSize: `${(x.size / Math.pow(1024, 2)).toFixed(2)}M`
        }));
        
    }, 0);
};
// 删除列表
function deleteRow(uid: number, uploadRef: any) {
    waitFileList.value = waitFileList.value.filter(x => x.uid != uid);
    uploadRef.handleRemove(waitFileList.value);
}
// 表格选中的数据
function handleSelectionChange(fileList: any[]) {
    selectedFile.value = fileList;
    // 预防分割导致数据变化
    flgs.value.selectedFile = deepCopy(fileList)
}
// 开始上传
async function uploadBegin(uploadRef: any) {
    // 前置条件
    if (!flgs.value.projectId) return alertMsg('warning', '请选择批次');
    if (selectedFile.value.length == 0) return alertMsg('warning', '请选择要上传的文件');
    // loading
    flgs.value.processFlgs = true;
    // 十五张图片一次请求
    for (let i: number = 0; i < flgs.value.selectedFile.length; i += 1) {
        // 每次添加后删除原有数据
        let uploadFile: any[] = selectedFile.value.splice(0,selectedFile.value.length<1 ? selectedFile.value.length : 1);
        uploadAPI(uploadFile,uploadRef)
    }
}
function uploadAPI(list: any[], uploadRef: any) {
    const formData = new FormData();
    formData.append('projectId', flgs.value.projectId);
    list.forEach(x => {
        formData.append('files', x.raw);
    });
    postFormData(DataM.upload, formData).then(res => {
        flgs.value.count++
        // 进度条数据
        flgs.value.processNum = ((flgs.value.count) / flgs.value.selectedFile.length) * 100;
        // 上传完成时初始化数据
        if (flgs.value.processNum == 100) {
            flgs.value.processFlgs = false;
            flgs.value.count = 0
            waitFileList.value = deWeight(waitFileList.value,flgs.value.selectedFile)
            uploadRef.handleRemove(flgs.value.selectedFile);
            alertMsg('success', '上传成功' || res.message);
        }
    });
}
</script>

<style lang="less" scoped>
.right-container {
    margin: 5px;
    .u-header {
        width: 100%;
        padding: 10px;
        .header-font {
            line-height: 32px;
        }
        .right-fun {
            width: 15%;
            .check-menu {
                color: rgb(174, 174, 174);
                font-size: 14px;
            }
        }
        .el-button {
            border-radius: 5px;
        }
    }
    .u-table {
        height: calc(100vh - 180px);
        overflow-y: auto;
        .el-table__header-wrapper {
            .cell {
                text-align: right;
            }
        }
    }
    .upload-s {
        width: 100%;
    }
    .r-bottom {
        width: 100%;
        position: relative;
        display: flex;
        justify-content: space-between;
        .pa-md{
            padding: 10px;
        }
    }
    
}
</style>

开发过程中遇到的问题及解决方案

1.使用on-change属性时多次调用绑定的方法

将选中数据的赋值放到定时器(任务队列)中，让每次都拿到最后一次change的数据

2.自定义上传列表数据删除时，上传组件原有的数据未删除

如果不需要上传组件自带的上传列表，删除即可，但是原有的数据会一直存在上传组件的插槽中，需要在删除自定义上传列表的同时删除原有插槽中的数据，否则会一直存在

3.数组切割导致素组被破坏，循环无法正常运行

关于基本数据类型和引用数据类型的知识点，因为数据属于引用数据类型，在赋值的时候只是赋值的地址而不是数据本身，所以原有的数据发生改变时，当前的数据也会变化。此问题解决方案为使用深拷贝拷贝一份数据即可

4.循环调用使用接时，每次的请求参数都会变为循环最后一次所得的参数(与第一个问题可以互相引用)

因为请求是异步的，导循环已经执行完毕之后才开始请求，导致请求参数错误。涉及到JS的执行机制，JS会执行栈中的任务(同步)，栈中的任务完后才执行任务队列中的任务(异步)

红藕香残玉簟秋.
关注
  • 2
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
Vue3 - Element Plus上传组件el-upload上传多个文件时，让on-change监听事件仅执行一次并获取最终文件列表方法（开启多选文件并手动上传，拿到文件列表统一循环调用接口上传）
王佳斌
01-11 4357
vue3，element plus，Upload 上传，el-upload，文件上传组件，上传组件on-change里执行多次，取消自动上传后change重复执行问题，upload上传多个文件后导致on-change执行多次拿不到最终文件列表，Element-plus的upload组件on-change不断执行怎么办，上传多个文件多次执行调用，上传多个文件时如何只执行一次on-change方法拿到最终的文件列表，vue3 element plus上传组件开启多个上传后导致change方法执行好几次，仅调用一
Vue3 - 详细实现大文件 “分片/切片“ 上传到服务器教程，支持批量多文件、文件夹上传、断点续传、上传进度条、上传预估时间、失败自动重传、暂停继续、快传，解决前端超大文件无法上传问题（详细示例代码
最新发布
王佳斌
04-29 3642
vue3，大文件分片上传，前端文件太大切片上传，断点续传，vue3如何实现超大文件分片上传服务器，vue3切片上传，vue3大文件上传，分片式文件上传，详细示例代码教程，分块上传，vue3前端大文件分片上传，断点续传，vue的axios怎么实现大文件分片和断点续传，vue文件太大服务端接收不了怎么办，vue-simple-uploader，官方文档，vue实现大文件切片上传的示例详解，vue3+ts，配合upload上传组件，vue上传超大压缩包，在vue3项目中实现文件分片上传，解决vue3中不能使用vu
＜el-upload 上传自定义进度条 | elementUI上传组件进度条
画个圆圆的地球
10-20 3820
自定义进度条 //我的部分不完整代码 <el-upload :action="UploadUrlR()" :on-success="handleSuccessR" :on-error="handleErrR" multiple :limit="1" :show-file-list=false :on-exceed="handleEx...
el-upload自定义文件列表
weixin_60945744的博客
10-08 5717
el-upload 自定义展示文件上传列表
elementUI+el-upload 上传、下载、删除文件以及文件展示列表自定义为表格展示
weixin_64310738的博客
01-18 7013
是否显示已上传文件列表。展示自定义表格样式需要设置on-success文件上传成功时的钩子。如果不设置，则选取文件后立即进行上传，成功回调后使用返回的参数调用接口，完成文件上传。
vue3 element-plus 一次上传多个文件
andylou_1的专栏
03-05 2730
element-plus 一次上传多个文件的实现
自定义elment-ui中的el-upload组件上传列表显示及进度条问题及base64转码
l976425836的博客
10-15 1590
使用el-upload组件上传没有其他要求时进度条显示是没有问题的，但是要对上传的数据进行特殊处理时（如转成base64等），就需要用自定义上传用http-request方法，这时进度条就不显示了或者显示有问题，查了很多资料大多数是针对单文件上传的，多文件上传几乎没有，于是自己决定实现一个 一、 ui <el-upload ref="uploadMutiple" action="" :show-file-list="false" .
【学习记录21】Vue+ElementUI el-upload多文件上传，一次请求上传多个文件！
wenhui的博客
03-30 7796
前情回顾说点废话。。。1、项目当中遇到需要上传多个图片，一次选取多个图片。但是吧el-upload默认只能一个一个传，每次上传成功还的自己去push，一个一个去判断。2、关键是后台给的接口，要一次性接收一堆，无奈之下只能去网上搜索，大佬们都是给的代码片段无法直接使用。3、闲下来就想着自己写一个吧。大家共同学习进步，我也巩固一下知识点！有问题的地方欢迎各位大佬指正！话不多说直接撸代码！！！
vue3+wangEditor5自定义上传音频+视频
07-05
在本文中，我们将深入探讨如何在Vue3项目中结合wangEditor5实现自定义上传音频和视频功能。wangEditor5是一款轻量级且功能强大的富文本编辑器，它提供了丰富的API和自定义选项，使得在Vue3这样的现代前端框架中集成...
vue3+antv x6+tsx 制作自定义流程图
09-23
在本文中，我们将深入探讨如何使用Vue3、AntV X6和TSX技术栈来创建一个自定义的流程图。这个项目旨在利用这些强大的工具，提供一个可扩展且用户友好的流程图编辑环境。 首先，Vue3是Vue.js框架的最新版本，它引入了...
vite+vue3使用模块化批量发布Mockjs接口
03-29
"vite+vue3使用模块化批量发布Mockjs接口"这个主题涵盖了如何在Vite搭建的环境中，结合Vue3和Mockjs来实现接口的模块化和批量处理。这将帮助开发者在实际API未准备好或者不便于调试时，快速模拟后端数据，提高开发...
vue+element实现大文件上传
07-04
vue+element实现大文件上传
vue3+ts实现drag/draggable拖拽任务看板taskboard
07-05
在Vue3中，可以使用像`vue-gantt`这样的库来创建自定义的甘特图组件。这些组件通常接受任务列表作为输入，然后根据这些数据生成图表。在ts项目中，我们可以定义一个GanttTask对象，包括任务名称、开始时间、结束时间...
element ui upload 手动上传文件，传多个参数
Igiveufireworks的博客
05-05 1610
需求：在弹窗内部上传文件，限制传1个文件，点击上传文件按钮不会上传，点击确定键再上传。设置为false，在选取文件后不立即进行上传。js：点击确认时再调用后端上传接口。
Element_文件上传&&多个文件上传
虎康的博客
11-16 1817
上传文件之前的钩子，参数为上传的文件， 若返回false或者返回 Promise 且被 reject，则停止上传。文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用 (uploadFile: UploadFile, uploadFiles: UploadFiles) => void。文件上传失败时的钩子 (error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles) => void。
vue3+element-plus实现单个接口实现多文件上传（循环调用接口实现多文件上传）
weixin_52443895的博客
07-05 2923
【代码】vue3+element-plus实现单个接口实现多文件上传（循环调用接口实现多文件上传）
Element之el-upload多文件一次性上传
DoubleInjured的博客
12-09 6044
el-upload多文件一次性上传
【前端相关】elementui使用el-upload组件实现自定义上传
热门推荐
No8g攻城狮的博客
05-24 2万+
官方的描述是说 覆盖默认的上传行为，可以自定义上传的实现，类型是 function，可选值与默认值都省略。经过我的探索，我发现它可以接收一个参数，这个参数保存了你文件上传的对象。elmentui 中的upload默认的提交行为是通过 action 属性中输入的 url 链接，提交到指定的服务器上。先定义了一个 el-upload标签，在里面先把自动上传文件关闭，由于action是必填项，所以就塞了个#进去，在。在这个函数里面，我实现了自定义文件上传的请求。上传文件之前的钩子，参数为上传的文件，若返回。
vue3.2结合element-plus自定义上传组件
weixin_45686265的博客
12-14 719
vue3.2结合element-plus自定义上传组件
vite+vue3+element-plus图标自定义实现方式
06-02
要在vite+vue3+element-plus中自定义图标，可以按照以下步骤进行操作： 1. 下载需要的图标素材，可以是svg、png、jpg等格式的图片。 2. 将下载的图标素材放置到项目中的某个目录下，比如`src/icons/svg`目录。 3. 在`main.js`中引入`@element-plus/icons`，并注册自定义图标。 ```javascript import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' import { register } from '@element-plus/icons' import { App as AppIcon } from './icons/svg/app.svg' register({ 'app': AppIcon }) createApp(App).use(ElementPlus).mount('#app') ``` 4. 在需要使用自定义图标的地方，使用`el-icon`组件，并传入注册的图标名称。 ```html <template> <div> <el-icon name="app"></el-icon> </div> </template> ``` 以上就是vite+vue3+element-plus图标自定义的实现方式。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

红藕香残玉簟秋.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值