vue中实现分片大文件上传

suoh's Blog

已于 2022-08-11 10:43:54 修改

阅读量1.3w

点赞数 29

CC 4.0 BY-SA版权

分类专栏： ❤️❤️--vue2核心技术栈文章标签： vue实现大文件上传

于 2022-04-27 17:28:58 首次发布

本文链接：https://blog.youkuaiyun.com/qq_41579104/article/details/124456211

❤️❤️--vue2核心技术栈专栏收录该内容

53 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了在Vue中利用spark-md5库实现大文件的分片上传，提供了详细的组件代码，可直接复制使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、安装 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" ref="uploadfile" :limit="1">
            <el-button size="small" type="primary" :loading="loadingFile">上传文件</el-button>
        </el-upload>
    </div>
</template>

<script>
import SparkMD5 from "spark-md5";
const chunkSize = 10 * 1024 * 1024;//定义分片的大小 暂定为10M，方便测试
import { message_s, message_w } from '@/methods/element';//引入elementui消息提示框
ex

了解本专栏