Vue3.0 大文件上传

最新推荐文章于 2024-03-19 14:05:21 发布
最新推荐文章于 2024-03-19 14:05:21 发布
阅读量1.2k 收藏 1
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sunshinedada/article/details/119536245
版权

Vue3.0 大文件上传

组件：

components>fastloader.vue

<template>
  <div class="uploadBox">
    <template v-if="state.file != null">
      <div class="fileName">{{ state.file?.name }}</div>
      <!-- {uploadBtn} -->
      <div v-if="state.initMd5Status" class="initMd5loading">
        正在校验md5中<img src="../../assets/images/loading_black.gif" />
      </div>
      <img
        v-if="!state.initMd5Status && state.uploadDone"
        src="../../assets/images/upload_done.svg"
        class="done"
      />
      <div
        v-if="!state.initMd5Status && !state.uploadDone"
        class="uploadStartOrStop"
      >
        <!-- {upStatusIcon} -->
        <img
          v-if="state.uploadStatus"
          src="../../assets/images/upload_stop.svg"
          :class="`iconfont icon-kaishi1 play`"
          @click="StopUploadChunks"
        />
        <img
          v-else
          src="../../assets/images/upload_play.svg"
          :class="`iconfont icon-kaishi1 play`"
          @click="handleUpload"
        />

        <svg
          class="circleBg"
          width="25"
          height="25"
          viewBox="0 0 25 25"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle
            cx="12"
            cy="12"
            r="8"
            fill="none"
            stroke="#eee"
            stroke-width="3.5"
          ></circle>

          <circle
            cx="12"
            cy="12"
            r="8"
            class="mycircle"
            transform="translate(0,24) rotate(-90)"
            :style="`stroke-dasharray:${state.currentUploadProgress} 51`"
          ></circle>
        </svg>
      </div>
      <img
        src="../../assets/images/upload_sel_delete_icon.svg"
        class="uploaddeleteIcon"
        @click="deleteSelFile"
      />
    </template>

    <div class="uploadBtn" v-else>
      <!-- {this.props.children} -->
      <span style="color: #999999; font-size: 12px">上传：</span>
      <img
        src="../../assets/images/upload_sel_icon.png"
        class="uploadBtnIcon"
      />
      <input type="file" @change="handleFileChange($event)" />
    </div>

    <!-- <div>{{ state.currentUploadProgress }}</div> -->
  </div>
</template>
<script>
import { post, postCancel } from "../../api/http";
import { API } from "../../api/index";
import { message, Table, Progress } from "ant-design-vue";
import SparkMD5 from "spark-md5";
import { reactive, ref } from "@vue/reactivity";
export default {
  name: "upload",
  props: {
    directionType: String,
  },
  setup(context, props) {
    console.log(context, props, "!!!!!!!!!!!!!!!!!!!");
    const state = reactive({
      file: null,
      chunkData: [],
      uploadStatus: false,
      uploadDone: false,
      uploadInfos: null,
      currentUploadProgressIndex: 0,
      currentUploadProgress: 0,
      initMd5Status: false,

      requestData: [],
      location: "",
    });
    const filemd5init = (files) => {
      return new Promise((resolve, reject) => {
        var blobSlice = File.prototype.slice,
          file = files,
          chunkSize = 10 * 1024 * 1000, // Read in chunks of 2MB
          chunks = Math.ceil(file.size / chunkSize),
          currentChunk = 0,
          spark = new SparkMD5.ArrayBuffer(),
          fileReader = new FileReader();

        fileReader.onload = function (e) {
          //console.log('read chunk nr', currentChunk + 1, 'of', chunks);
          spark.append(e.target.result); // Append array buffer
          currentChunk++;

          if (currentChunk < chunks) {
            loadNext();
          } else {
            //console.log('finished loading');

            resolve({
              md5: spark.end(),
            });
          }
        };

        fileReader.onerror = function (e) {
          reject(e);
          //console.warn('oops, something went wrong.');
        };

        function loadNext() {
          let start = currentChunk * chunkSize,
            end =
              start + chunkSize >= file.size ? file.size : start + chunkSize;

          fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
        }

        loadNext();
      });
    };
    const timerNum = ref(0);
    let timer;
    const mergeRequest = async () => {
      let params = new URLSearchParams();
      params.append("fileName", state.file.name);
      params.append("identifier", state.file._hashmd5);
      params.append("locationType", "LOCAL");
      params.append("refProjectId", state.file.name);
      params.append("size", state.file.size);
      params.append("directionType", context.directionType);

      console.log(params, "!!!!!!333333");
      post(API.uploader.mergeFile, {
        data: params,
      }).then((res) => {
        timer = setInterval(async () => {
          post(API.uploader.selectFileStatus, {
            data: params,
          }).then((res) => {
            if (res.data.fileStatus == "PUSH_FINISH") {
              //清除暂停信息
              state.uploadDone = true;
              state.uploadInfos = null;
              state.uploadStatus = false;
              state.currentUploadProgressIndex = 0;
              state.currentUploadProgress = 0;
              state.location = res.data.relativePath;

              props.emit("uploadSuccess", res.data, state.file, state.location);
              clearInterval(timer);
            } else if (res.data.fileStatus == "PUSH_FAILURE") {
              state.uploadDone = false;
              state.uploadInfos = null;
              state.uploadStatus = false;
              state.currentUploadProgressIndex = 0;
              state.currentUploadProgress = 0;
            }
          });
        }, timerNum.value * 1000);
      });
    };

    const StopUploadChunks = () => {
      //暂停所有请求

      state.uploadStatus = false;

      const index = state.currentUploadProgressIndex;

      const alllength = state.requestData.length;

      for (let i = Number(index) + 1; i < alllength; i++) {
        state.requestData[i].cancel();
      }
      // for (let i = 0; i < state.requestData.length; i++) {
      //   state.requestData[i].cancel();
      // }
      //将暂停的上传信息存到localstorage 暂时先做临时的,关闭浏览器刷新页面就全部重新上传
      //保存的是暂停时候的循环的当前上传文件
      // let currentFileInfos = new Map();
      // currentFileInfos.set(arrdata[i].filename, arrdata[i].chunkNumber);
      // this.setState({
      //     uploadInfos: currentFileInfos
      // })
    };

    const deleteSelFile = () => {
      state.file = null;
      state.chunkData = [];
      state.uploadStatus = false;
      state.uploadDone = false;
      state.uploadInfos = null;
      state.currentUploadProgressIndex = 0;
      state.currentUploadProgress = 0;
      timer && clearInterval(timer);
      console.log(state, "state");
      StopUploadChunks();
    };

    const uploadChunks = async (arrdata) => {
      // if (arrdata.length === 0) {
      //   state.uploadInfos = null;
      //   state.uploadStatus = false;
      //   state.uploadDone = true;
      //   console.log("nmmmmmmmmmmb");
      // }
      let promiseReq = [];
      for (let i = 0; i < arrdata.length; i++) {
        let formDataorigin = new FormData();
        formDataorigin.append("identifier", arrdata[i].identifier);
        formDataorigin.append("chunkNumber", arrdata[i].chunkNumber);
        formDataorigin.append("chunkSize", arrdata[i].chunkSize);
        formDataorigin.append("currentChunkSize", arrdata[i].currentChunkSize);
        formDataorigin.append("totalSize", arrdata[i].totalSize);
        formDataorigin.append("filename", arrdata[i].filename);
        formDataorigin.append("relativePath", arrdata[i].relativePath);
        formDataorigin.append("totalChunks", arrdata[i].totalChunks);
        formDataorigin.append("file", arrdata[i].file);
        formDataorigin.append("directionType", context.directionType);

        // let fetchReq = this.request.uploadChunkFile(formDataorigin);
        console.log(formDataorigin, "!!!!!!");

        //请求数据
        let fetchReq = postCancel(API.uploader.uploadChunkFile, {
          data: formDataorigin,
        });

        //收集axios对象
        promiseReq.push(
          fetchReq.send().then((res) => {
            if (res.status == 200) {
              state.currentUploadProgressIndex =
                state.currentUploadProgressIndex + 1;
              state.currentUploadProgress =
                (state.currentUploadProgressIndex / state.chunkData.length) *
                51;
              return Promise.resolve(res);
            } else {
              return Promise.reject(res);
            }
          })
        );

        let tmpReqArr = state.requestData;
        tmpReqArr.push(fetchReq.abort);
        state.requestData = tmpReqArr;
      }
      //进行并发请求
      Promise.all(promiseReq)
        .then((values) => {
          console.log(values);
          mergeRequest();
        })
        .catch((reason) => {
          console.log(reason);
        });
    };

    const createFileChunk = (file, size) => {
      const fileChunkList = [];
      let cur = 0;
      while (cur < file.size) {
        fileChunkList.push({ file: file.slice(cur, cur + size) });
        cur += size;
      }

      return fileChunkList;
    };

    const handleUpload = async () => {
      if (!state.file) return;

      //console.log("文件:", this.state.file);

      //如果存在暂停信息那么就从暂停项开始截取上传数组并且继续传 否则全部重新赋予上传数组
      // if (this.state.uploadInfos) {

      //     let currentFileData = this.state.chunkData.slice(parseInt(this.state.uploadInfos.get(this.state.file?.name)))
      //     this.setState({
      //         // chunkStopData: currentFileData,
      //         uploadStatus: true
      //     }, async () => {
      //         //console.log("续传数组", currentFileData)
      //         await this.uploadChunks(currentFileData);
      //     })

      // } else {

      const fileChunkList = createFileChunk(state.file, 2048000);
      let data = fileChunkList.map(({ file }, index, array) => ({
        chunk: file,
        hash: state.file.name + "-" + index, // 文件名 + 数组下标
        identifier: state.file._hashmd5,
        chunkNumber: index + 1,
        chunkSize: file.size,
        currentChunkSize: file.size,
        totalSize: state.file.size,
        filename: state.file.name,
        relativePath: state.file.name,
        totalChunks: fileChunkList.length,
        file: file,
      }));
      state.chunkData = data;
      state.uploadStatus = true;

      //     //console.log("开始数组", data)
      //     //判断穿过的文件跳过(截取未上传的startindex->last)

      let formDataorigin = new FormData();
      formDataorigin.append("identifier", data[0].identifier);
      formDataorigin.append("chunkNumber", data[0].chunkNumber);
      formDataorigin.append("chunkSize", data[0].chunkSize);
      formDataorigin.append("currentChunkSize", data[0].currentChunkSize);
      formDataorigin.append("totalSize", data[0].totalSize);
      formDataorigin.append("filename", data[0].filename);
      formDataorigin.append("relativePath", data[0].relativePath);
      formDataorigin.append("totalChunks", data[0].totalChunks);
      formDataorigin.append("file", data[0].file);
      formDataorigin.append("directionType", context.directionType);
      //可能存在过此文件.如果存在则需要进行妙传功能

      console.log(formDataorigin, "!!!!!!22222", data);
      post(API.uploader.uploadChunkFile, {
        data: formDataorigin,
      })
        .then((res) => {
          if (res.data.ifAllExist) {
            state.uploadInfos = null;
            state.uploadStatus = false;
            state.uploadDone = true;
            // props.uploadSuccess(null, state.file, res.location);
            console.log(props, "props");
            props.emit("uploadSuccess", null, state.file, res.data.location);
            return;
          }

          //如果存在那么就进行跳过,并且截取未上传的文件,然后开始上传
          if (res.data.chunkInfoDto?.chunkNumber) {
            let currentFileData = state.chunkData.slice(
              parseInt(res.data.chunkInfoDto.chunkNumber)
            );
            state.currentUploadProgressIndex =
              res.data.chunkInfoDto.chunkNumber + 1;
            state.currentUploadProgress =
              (state.currentUploadProgressIndex / state.chunkData.length) * 51;

            uploadChunks(currentFileData);
          } else {
            console.log("不存在走全部", data);
            state.currentUploadProgressIndex =
              state.currentUploadProgressIndex + 1;
            state.currentUploadProgress =
              (state.currentUploadProgressIndex / state.chunkData.length) * 51;
            uploadChunks(data.slice(1));
          }
        })
        .catch((res) => {
          message.error(res);
        });
    };

    const handleFileChange = async (e) => {
      console.log(e);
      const [file] = e.target.files;

      if (!file) return;
      state.initMd5Status = true;
      state.file = file;

      const timerReqNum = file.size / 1024 / 1024 / 1024;
      if (timerReqNum <= 0.5) {
        timerNum.value = 3;
      } else if (timerReqNum >= 0.5 && timerReqNum <= 1) {
        timerNum.value = 15;
      } else if (timerReqNum >= 1 && timerReqNum <= 2) {
        timerNum.value = 30;
      } else if (timerReqNum >= 2) {
        timerNum.value = 40;
      }

      console.log(file);
      //校验md5
      // let md5data: any = await this.filemd5init(file);

      file._hashmd5 = file.name + file.lastModified;
      state.initMd5Status = false;
      state.file = file;
    };
    return {
      state,
      filemd5init,
      mergeRequest,
      StopUploadChunks,
      deleteSelFile,
      uploadChunks,
      createFileChunk,
      handleUpload,
      handleFileChange,
    };
  },
};
</script>
<style lang="less" scope>
.mycircle {
  stroke: #1890ff;
  fill: rgba(0, 0, 0, 0);
  stroke-width: 2.8px;
  stroke-dasharray: 0 51;
}

.uploadBox {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .fileName {
    margin-left: 10px;
    font-size: 14px;
    font-weight: 200;
    color: #8c8c8c;
  }

  .initMd5loading {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 12px;
    margin-left: 10px;
    color: #8c8c8c;
    img {
      margin-left: 5px;
      width: 20px;
      height: 20px;
      background-size: cover;
    }
  }

  .done {
    width: 20px;
    height: 20px;
    margin-left: 10px;
  }

  .uploadStartOrStop {
    width: 25px;
    height: 25px;
    margin-left: 10px;
    position: relative;

    .play {
      width: 9px;
      height: 9px;
      color: #1890ff;
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 2;
      transform: translate(-50%, -50%);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .circleBg {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 1;
      transform: translate(-50%, -50%);
    }
  }
}

.tips {
  text-anchor: middle;
  dominant-baseline: middle;
  font-size: 30px;
  font-family: Arial;
}

.uploadBtn {
  position: relative;
  width: 100px;
  height: 30px;
  border-radius: 18px;
  border: 2px solid #eee;
  font-size: 15px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  .uploadBtnIcon {
    width: 17px;
    height: 14px;
    background-size: cover;
  }

  input {
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 1;
  }
}

.uploaddeleteIcon {
  width: 20px;
  height: 16px;
  margin-left: 10px;
}
</style>

使用：

Fastloader.vue：
通过传不同的directionType来选择不同的类型

<template>
  <div class="Fastloader">
    <UploadBigFile
      class="uploadSlot"
      directionType="METEORO_GRIB2"
      @uploadSuccess="uploadSuccess"
    ></UploadBigFile>
  </div>
</template>

<script>
// @ is an alias to /srca
import Fastloader from "./Fastloader";
export default Fastloader;
</script>
<style lang="less" scoped>
.Fastloader {
  margin-top: 20px;
}
</style>

Fastloader.js:

import UploadBigFile from '../../../../components/fastloader/fastloader';
export default {
    name: "Fastloader",
    components: {
        UploadBigFile
    },
    setup(props) {
        const uploadSuccess = (e, file, location) => {
            console.log("啊啊啊啊啊哦哦哦哦哦哦", e, file, location)
        }
        return {
            uploadSuccess
        }
    }
};

效果：
上传前：
在这里插入图片描述
选择文件：
在这里插入图片描述
上传中：
在这里插入图片描述
上传完成：
在这里插入图片描述

Sunshinedada
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue3 - 详细实现大文件 “分片/切片“ 上传到服务器教程，支持批量多文件、文件夹上传、断点续传、上传进度条、上传预估时间、失败自动重传、暂停继续、快传，解决前端超大文件无法上传问题（详细示例代码
王佳斌
04-29 3355
vue3，大文件分片上传，前端文件太大切片上传，断点续传，vue3如何实现超大文件分片上传服务器，vue3切片上传，vue3大文件上传，分片式文件上传，详细示例代码教程，分块上传，vue3前端大文件分片上传，断点续传，vue的axios怎么实现大文件分片和断点续传，vue文件太大服务端接收不了怎么办，vue-simple-uploader，官方文档，vue实现大文件切片上传的示例详解，vue3+ts，配合upload上传组件，vue上传超大压缩包，在vue3项目中实现文件分片上传，解决vue3中不能使用vu
vue3多文件大文件分片上传（spark-md5）
qq_41990338的博客
07-17 4240
文件通过input上传到页面时对应使用spark-md5生成一个hash值，生成hash值之后分片（每个分片hash相同，索引不同），获取到hash值之后调用查询接口，查询文件对应哪些分片已经上传过，上传过的分片跳过，在所有文件分片上传完之后，还需要把分片的文件合并。文件使用spark-md5 获取hash值，文件内容不修改的话（文件名修改不影响hash值）获取的hash值是一致的，分片条件不变的话，索引也是对应一致的，以此做为前提才能做到跳过已上传的分片。七、文件分片及查询已上传的分片。
VUE上传大文件的三种解决方案
weixin_45525177的博客
02-16 4878
此外断点续传还需要考虑切片过期的情况：如果调用了mkfile接口，则磁盘上的切片内容就可以清除掉了，如果客户端一直不调用mkfile的接口，放任这些切片一直保存在磁盘显然是不可靠的，一般情况下，切片上传都有一段时间的有效期，超过该有效期，就会被清除掉。上传暂停的实现也比较简单，通过xhr.abort可以取消当前未完成上传切片的上传，实现上传暂停的效果，恢复上传就跟断点续传类似，先获取已上传的切片列表，然后重新发送未上传的切片。通过xhr，前端也可以进行异步上传文件的操作，一般由两个思路。
JAVA+VUE3.0+MINIO 大文件上传（极速上传，分片上传）
qq_43842093的博客
02-26 3782
/ 切片大小为5M我们需要重新写一个MINIO客户端来实现我们的分片上传。/*** MINIO 遵循 AmazonS3 规则，S3 有的方法他都有实现* 关于其他方法* 参考 MINIO 网站* 结合 亚马逊官方文档* 查看方法使用和效果/*** 需要清理的文件时间范围* 一天。
一文掌握 Vue3 + Express 大文件分片上传、断点续传、秒传技巧！
CRMEB小程序商城的博客
12-25 1916
在日常开发中，文件上传是常见的操作之一。文件上传技术使得用户可以方便地将本地文件上传到Web服务器上，这在许多场景下都是必需的，比如网盘上传、头像上传等。上传时间比较久；中间一旦出错就需要重新上传；一般服务端会对文件的大小进行限制。这几个问题会导致上传时候的用户体验是很不好的，针对存在的这些问题，我们可以通过分片上传来解决。
Vue3 组件封装——文件上传
Skybububu的博客
06-10 5860
new 一个 FileReader 实例，并调用 readAsDataURL 方法传入参数 file 来读取选中的图像文件，最后在 onload 事件中，获取到成功读取的文件内容。最后插入一个 img 节点设置 src = reader.result显示选中的图片
vueCli3.0文件上传后，后端返回流,前端转换成pdf预览的3种方式
04-22
vueCli3.0文件上传后，后端返回流,前端转换成pdf预览的3种方式
vue3.0搭配.net core实现文件上传组件
01-22
客户端使用vue.js 3.0，并使用vue3新增的功能:Composition API ,服务器使用asp.net core 功能点 标签美化 文件预览 文件上传 服务器接收文件 文件选择美化 在标准的html文件选择标签，是十分不美观的。大概就是...
vue-form-create:基于Vue3.0的表单设计器
04-17
vue-form-create基于 Vue3.0 + TS 的自定义表单生成器。支持 npm 与 cdn 引入的方式。UI 库支持 ant-design-vue 与 element-plus。支持功能远端数据获取图片上传富文本编辑器栅格布局生成 JSON生成代码演示地址...
vue-cli3.0+element-ui上传组件el-upload的使用
11-28
最近项目中涉及很多文件上传的地方，然后文件上传又有很多限制。比如文件大小限制，文件个数限制，文件类型限制，文件上传后的列表样式自定义，包括上传进度条等问题。下面是我对element-ui的上传组件的一些改造， ...
vue实现Excel文件的上传与下载功能的两种方式
10-16
主要介绍了vue实现Excel文件的上传与下载功能，本文通过两种方式给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue3 + Nodejs 实战 ，文件上传项目--大文件分片上传+断点续传
m0_64642443的博客
10-20 1466
​系列专栏：vue3+nodejs 实战--文件上传​​​欢迎关注在上一篇中我们实现了文件的拖拽上传，该篇就讲讲大文件上传的需求场景。
Vue3后台管理系统（十）文件上传
Good Luck
02-23 1万+
Vue3后台管理系统（十）文件上传
使用vue3+node.js实现大文件上传+妙传+断点续传
qynglby的博客
02-09 415
1.选择文件，进行切片 2.计算哈希值 3.上传分片 4.上传完毕之后，通知服务器合并文件 5.秒传：发送请求校验哈希值 6.断点续传：过滤掉已有的切片
前端大文件上传 - 总结（Vue3 + hook + Web Worker实现，通过多个Worker线程大大提高Hash计算的速度）
qq_41068362的博客
08-18 1796
前端大文件上传 - 总结（Vue3 + hook + Web Worker实现，通过多个Worker线程大大提高Hash计算的速度）
vue---大文件分片上传
maidu_xbd的博客
06-05 2982
思路：将大文件切成小片异步上传可以解决大文件上传过慢的问题，但如果文件很大时，采用一次性异步上传，会在同一时间产生过多的请求，后端服务器处理不过来，导致请求异常。因此将文件切成小片后，再分组上传，比如一组10个切片，等待10个切片的请求上传完成后，再接着下一组，以此减轻对服务器的压力。
vue3 实现文件上传
热门推荐
weixin_52803316的博客
03-26 1万+
vue3 实现文件上 <template> <el-button type="primary" icon="CirclePlus" @click="upload(null)">上传文件</el-button> <el-dialog title="上传文件" :close-on-click-modal="false" v-model="uploadFile" width="500p
Vue3 + Express 实现大文件分片上传、断点续传、秒传
最新发布
xxq_0217的博客
03-19 1529
文件上传优化，分片上传、秒传、断点续传
vue中实现分片大文件上传
蜗牛~~
04-27 1万+
一、安装 spark-md5 npm i spark-md5 --save 二、上传大文件组件（全代码）复制粘贴就能用 <template> <div class="myDiv"> <el-upload class="upload-demo" action="#" :on-change="uploadFile" :show-file-list="true" :file-list="fileList" :auto-upload="false" .
vue3.0 formdata上传excel
07-29
2. 在Vue组件的methods中，创建一个方法来处理文件上传事件。当文件选中并发生改变时，该方法会从input元素中获取文件并进行处理。 ``` handleFileUpload() { const file = this.$refs.fileInput.files[0]; this....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值