1.html代码
<template>
<div class="card content-box">
<el-upload ref="upload" class="upload-demo" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
:limit="1" :on-change="handleFileChange" :auto-upload="false">
<template #trigger>
<el-button type="primary">选择文件</el-button>
</template>
<el-button :disabled="uploadDisabled" class="ml-3" type="success" @click="handlerUpload">上传</el-button>
<el-button class="ml-3" type="success" @click="handlePause">暂停</el-button>
<el-button class="ml-3" type="success" @click="handleResume">恢复</el-button>
<el-button class="ml-3" type="success" @click="resetData">重置</el-button>
<template #tip>
<br /><br />
<span>计算文件hash进度: {
{ hashPercentage }}%</span>
<br /><br />
<span>上传进度:{
{ fakeUploadPercentage }}%</span>
<el-progress :text-inside="true" :stroke-width="26" :percentage="fakeUploadPercentage" />
<div class="el-upload__tip text-red">限制一个文件, 新文件将会覆盖原文件</div>
</template>
</el-upload>
</div>
</template>
2.逻辑代码
<script setup lang="ts" name="menu222">
import { ElMessage } from 'element-plus'
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
import { Upload } from "@/api/interface";
import { UploadStatusEnum } from "@/enums/uploadEnum";
import { SIZE } from "@/config/config";
import { bigUploadRequest } from "@/api/modules/upload";
const upload = ref<UploadInstance>()
// 当前的