大文件分片上传,断点续传,秒传 示例(待更新...)

发布时间:2024年01月11日

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>()
// 当前的
文章来源:https://blog.csdn.net/qq_37860634/article/details/135537369
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。