Vue3+ElementPlue文件批量上传(自定义上传列表)
目录
需求:批量图片上传,可在列表中多选或全选,上传时可浏览进度,完成后清空列表。后端接口限制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会执行栈中的任务(同步),栈中的任务完后才执行任务队列中的任务(异步)
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhggkbea
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13