Vue3封装大文件切片上传

ッ微凉

于 2024-08-09 14:52:24 发布

阅读量485

点赞数 3

分类专栏： Vue3 文章标签： vue.js elementui

本文链接：https://blog.youkuaiyun.com/weiliangLAN/article/details/141061639

版权

目前根据业务只进行了切片功能，暂时没有断点续传、秒传。

效果图：

<template>
    <el-upload 
        ref="uploadRef" 
        v-show="showCollection.showUpload"
        class="upload-demo" 
        action="#"
        :auto-upload="false"
        :on-change="onChange"
        :on-remove="onRemove"
        :limit="props.limit"
        :on-exceed="handleExceed"
        :file-list="props.fileList"
    >
        <template #trigger>
            <div class="uploadBtn">
                <slot>
                    <img src="@/assets/imgs/upload-file.png" alt="">
                    <span>添加</span>
                </slot>
            </div>
        </template>
    </el-upload>
    <!-- 进度条 -->
    <div v-if="showCollection.showProgress" class="progressBox">
        <el-progress 
            :text-inside="true" 
            :stroke-width="15" 
            :status="progress == 100 ? 'success' : ''" 
            :percentage="progress" 
        />
        <el-icon>
            <SuccessFilled color="#00A058"  v-if="showCollection.showSuccess" />
            <Loading color="#98