先放效果图(参考的官网示例tus - resumable file uploads):
贴代码:(还用到了ElementPuls的进度条)
可能有些多余的代码,可以自己删一下
//下载的指令
npm i tus-js-client
<template>
<div class="upload-container">
<div class="btn-container" v-if="onShow == 1">
<input id="fileUpload" type="file" @change="handleFileChange" />
<el-button class="btn-file" size="small" type="primary" @click="btnFile"
>选择文件</el-button
>
<el-button
v-if="fileName !== '未选择任何文件'"
type="primary"
size="small"
@click="uploadFile"
>上传</el-button
>
</div>
<div class="btn-container" v-if="onShow == 2">
<el-progress
class="progress-bar"
:percentage="progress"
:stroke-width="20"
striped
:striped-flow="isUploadRunning"
:duration="10"
/>
<el-button type="primary" size="small" @click="pauseUpload">
{{ isUploadRunning ? "暂停" : "继续" }}
</el-button>
</div>
<div class="btn-container" v-if="onShow == 3">
<span>上传成功!</span
><el-button size="small" @click="onShow = 1">再传一个</el-button>
</div>
</div>
</template>
<script setup lang="ts">
import { convertDwgApi, saveUploadApi } from "@/api/modules/UPload";
import * as tus from "tus-js-client";
import { ref } from "vue";
import { useUserStore } from "@/stores/modules/user";
const userStore = useUserStore();
const isUploadRunning = ref(true);
const onShow = ref(1);
const fileName = ref("未选择任何文件");
const progress = ref();
const file = ref<any>();
const btnFile = () => {
document.getElementById("fileUpload")?.click();
};
const handleFileChange = (e: any) => {
file.value = null;
file.value = e.target.files[0];
fileName.value = file.value.name;
onShow.value = 1;
};
var upload: any;
const uploadFile = () => {
upload = new tus.Upload(file.value, {
// Endpoint is the upload creation URL from your tus server
endpoint: "http://192.168.10.21/File/Upload/",//这里写自己服务器地址
// Retry delays will enable tus-js-client to automatically retry on errors
// retryDelays: [0, 3000, 5000, 10000, 20000],//重发
// Attach additional meta data about the file for the server
// metadata: {
// filename: file.value?.name,
// filetype: file.value?.type,
// },
// Callback for errors which cannot be fixed using retries
onError: function (error) {
ElMessage.error(`上传失败:${error}`);
// console.log("Failed because: " + error);
},
// Callback for reporting upload progress
onProgress: function (bytesUploaded, bytesTotal) {
var percentage = ((bytesUploaded / bytesTotal) * 100).toFixed(2);
progress.value = Number(percentage);
if (progress.value == 100) {
onShow.value = 3;
}
// console.log(bytesUploaded, bytesTotal, percentage + "%");
},
// Callback for once the upload is completed
onSuccess: function () {
console.log("上传成功");
},
});
onShow.value = 2;
// Check if there are any previous uploads to continue.
upload.findPreviousUploads().then(function (previousUploads) {
// Found previous uploads so we select the first one.
if (previousUploads.length) {
upload.resumeFromPreviousUpload(previousUploads[0]);
}
// Start the upload
upload.start();
});
};
//暂停上传
function pauseUpload() {
isUploadRunning.value = !isUploadRunning.value;
if (isUploadRunning.value) {
upload.start();//继续
} else {
upload.abort();//暂停
}
}
</script>
<style lang="scss" scoped>
.upload-container {
width: 300px;
}
.btn-container {
display: flex;
position: relative;
.progress-bar {
width: 200px;
}
.btn-file {
position: absolute;
left: 0px;
}
}
</style>