tus-js-client库大文件上传、暂停、继续（vue3版本）

先放效果图（参考的官网示例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>

原文地址：https://blog.csdn.net/zsy1833579605/article/details/140555601

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！