vue 文件切片上传的项目实现

目录
  • 流程简说
  • 获取文件的 MD5 唯一标识码
  • 文件切片
    • 获取文件名 name
    • 分片文件大小 chunkSize
    • 文件切片 chunkList 列表
    • 切片总数 chunks
    • 切片大小 size
  • 合并

在实际开发项目过程中有时候需要上传比较大的文件,然后呢,上传的时候相对来说就会慢一些,so,后台可能会要求前端进行文件切片上传,很简单哈,就是把比如说1个G的文件流切割成若干个小的文件流,然后分别请求接口传递这个小的文件流。

流程简说

实现文件切片导入,首先我们使用 elementUI 也好,原生的 upload 标签也好,获取到文件 file 文件流,然后需要做的一件事情就是 知道这个文件之前有没有上传过,我们需要向后台提交一个这个文件唯一的标识符,然后让后端告诉我们这个问题后台有没有,这时候,后端可能返回我们三种状态:

  • 文件没有,需要全部上传。
  • 这个文件存在了,前端不需要再上传。
  • 这个文件上传了一部分,需要继续把没有上传的部分上传。

只有这三种状态,实现这个步骤的一个重要参数就是这个文件的唯一标识符,这个标识符,使用的就是这个文件的 MD5 标识码。所以我们首先需要获取这个文件的 MD5 唯一标识码。

我们知道文件需要上传或者是需要部分上传的时候,我们就需要进行切片操作了。这个就很简单了,比如文件的二进制字节流一共1个G,然后一般是 5M 切一片,所以说如果是1个G 的文件需要切 205 片,当然最后一片不一定是 5M,然后我们走文件分片上传的接口,发起文件分片导入的请求。

首先明确一点,就是我们把这 205 个分片数据流提交完,后台是需要合并的,就是把我们分片提交的在这 205 个文件流合成一个大的文件保存起来,这样,后台合并完的文件就是我们最终要提交导入的文件,既然后端需要合并,我们又是一片一片上传的,总得让后端知道每一片是这个文件的哪一部分吧?所以说我们提交分片请求的时候一般需要传递这几个参数:

  • chunk: 当前是第几个分片,一般从 0 开始。
  • chunkSize:分片的大小,一般是5M,即5242880字节。
  • chunks:一共有多少分片。
  • file:当前分片的文件流。
  • md5:整个文件的 MD5 唯一标识码,不是分片的哈。
  • name:当前文件的名称。
  • size:当前分片大小(如果最后一块不一定是 5M)。

这样后端就知道怎么去合并最后的文件了。当然了具体的字段需要后端去定义,然后我们按照这个思路去相应的对接就可以了。

OK,等我们 205 个分片数据全部提交完成,需要再走一个接口,就是通知后端,好了,我前端分片都传完了,你可以合并文件了。

然后后端合并完成,文件导入成功!

获取文件的 MD5 唯一标识码

很多人说哈,MD5 不是加密嘛,其实这个想法在这里不是很对哈,MD5 是加密不了文件的,只会生成一个唯一的编码,这么说呢,哎哟,就当是加密吧,但是别妄想提交一个 MD5 编码就当把加密的文件提交给后端了哈,首先这个就是一个字符串,不是加密的文件,第二,这个玩意并不能解密。我们这里只是给文件生成一个唯一标识符,让后端判断服务器之前有没有存在过这个文件,如果唯一标识有的话,就说明之前上传过,直接用之前的就可以了,就不用再次上传了,毕竟如果文件修改了,这个 MD5 标识码是会变的。

怎么获取文件的 MD5 编码很简单哈,在vue里面需要使用一个库 spark-md5

一句命令安装

npm install --save spark-md5

然后我们可以写一个方法来封装一下。

创建一个 fileMd5Sum.js 文件:

import SparkMD5 from 'spark-md5'

export default {
  // md5值计算
  fileMd5Sum(file) {
    return new Promise(resolve => {
      let fileReader = new FileReader()
      let Spark = new SparkMD5.ArrayBuffer()
      fileReader.readAsArrayBuffer(file)
      fileReader.onload = function (e) {
        Spark.append(e.target.result)
        let md5 = Spark.end()
        resolve(md5)
      }
    });
  }
}

然后在需要使用的时候就可以使用了,当然这里返回的是一个 Promise,直接 .then 就可以获取了。

或者是使用 async、 await

let md5Str = await this.fileMd5Sum.fileMd5Sum(file.raw)

文件切片

获取了文件MD5标识码,后台说需要提交,我们就需要把文件切片,从头提交或者是提交部分操作了,如果不需要的话直接走合并接口就可以了,走合并接口其实是告诉后台合并,我们要做的就是把其他除了文件相关的其他参数传递给后台罢了。

文件切片就是类似于字符串截取,这里是截取字节。获取需要的参数我们自己些就可以了。假设我们使用 elementUI 文件上传组件获取到了文件 file

获取文件名 name

let fileName = file.name  // 获取文件名

分片文件大小 chunkSize

let chunkSize = 5 * 1024 * 1024   // 一般是 5M,具体多少看后端想要多少

文件切片 chunkList 列表

            let chunkList = []  // 创建一个数组用来存储每一片文件流数据
            if (file.size < chunkSize) {  // 如果文件大小小于5M就只有一片,不用切都
              chunkList.push(file.raw.slice(0))  // 文件流从第一个字节直接截取到最后就可以了
            } else {  // 如果文件大小大于5M 就需要切片了
              var start = 0, end = 0  // 创建两个变量 开始位置 结束位置
              while (true) {  // 循环
                end += chunkSize  // 结束为止 = 结束位置 + 每片大小
                let blob = file.raw.slice(start, end)  // 文件流从开始位置截取到结束位置
                start += chunkSize  // 截取完,开始位置后移
                if (!blob.size) {  // 如果截取不到了就退出
                  break;
                }
                chunkList.push(blob)  // 把截取的每一片数据保存到数组
              }
            }

切片总数 chunks

我们上一步已经获取到每片文件流的数组了,所以说呢,直接获取就可以了。

let chunks = chunkList.length

切片大小 size

我们是按照 5 M 切割的,所以说每片大小应该是 5 * 1024 * 1024 但是呢,不对,因为最后一片不一定就是正好的 5 M,所以说我们可直接 .size 获取一下大小。比如:

chunkList[0].size  // 获取第1片大小

参数都找齐了,然后就走切片提交接口开始提交数据就可以了。

合并

当我们把分片数据全部提交成功,后台返回说切片文件保存成功之后,我们就可以走最后一个接口,提交就可以了。

到此这篇关于vue 文件切片上传的项目实现的文章就介绍到这了,更多相关vue 文件切片上传内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue实现封装一个切片上传组件

    目录 组件效果 使用文档 封装过程 1. 文件切片 2. 构造切片请求参数 3. 控制分片请求的并发 完整代码 待完善 组件效果 单文件切片上传 多文件切片上传 组件使用案例 <template> <div id="app"> <div class="upload-wrap"> <UploadSlice :action="uploadInfoSlice.actionChunk" :headers=&quo

  • Vue实现文件切片上传功能的示例代码

    目录 流程简说 获取文件的 MD5 唯一标识码 文件切片 获取文件名 name 分片文件大小 chunkSize 文件切片 chunkList 列表 切片总数 chunks 切片大小 size 合并 在实际开发项目过程中有时候需要上传比较大的文件,然后呢,上传的时候相对来说就会慢一些,so,后台可能会要求前端进行文件切片上传,很简单哈,就是把比如说1个G的文件流切割成若干个小的文件流,然后分别请求接口传递这个小的文件流. 流程简说 实现文件切片导入,首先我们使用 elementUI 也好,原生的

  • Vue项目使用Websocket大文件FileReader()切片上传实例

    目录 使用技术 upfile.js文件 新增需求:对上传文件流进行加密,并传给后端做验证 还是在upfile.js文件(也可以单独放一个文件) 大文件上传,本地1.3G文件不到一分钟上传完毕 使用技术 Vue框架 WebSocket双向传输 FileReader读取文件 封装的WebSocket请求文件上传方法,目前只支持单文件上传,有研究出来多文件上传,记得评论哦 upfile.js文件 //file.slice(起始字节,终止字节)与FileReader实现文件切片读取 function P

  • vue 文件切片上传的项目实现

    目录 流程简说 获取文件的 MD5 唯一标识码 文件切片 获取文件名 name 分片文件大小 chunkSize 文件切片 chunkList 列表 切片总数 chunks 切片大小 size 合并 在实际开发项目过程中有时候需要上传比较大的文件,然后呢,上传的时候相对来说就会慢一些,so,后台可能会要求前端进行文件切片上传,很简单哈,就是把比如说1个G的文件流切割成若干个小的文件流,然后分别请求接口传递这个小的文件流. 流程简说 实现文件切片导入,首先我们使用 elementUI 也好,原生的

  • js自己实现一个大文件切片上传+断点续传的示例代码

    目录 首先我们来分析一下需求 一. 格式校验 二. 文件切片 三. 断点续传 + 秒传 + 上传进度 PM:喂,那个切图仔,我这里有个100G的视频要上传,你帮我做一个上传后台,下班前给我哦,辛苦了.我:...相信每个切图工程师,都接触过文件上传的需求,一般的小文件,我们直接使用 input file,然后构造一个 new FormData()对象,扔给后端就可以了.如果使用了 Ant design 或者 element ui 之类的ui库,那更简单,直接调用一下api即可.当然了,复杂一些的,

  • java实现文件切片上传百度云+断点续传的方法

    前言: 本文代码通过dubbo进行远程调用的接口,如果不使用dubbo,直接将service放到你的service,并稍作修改,redis替换成自己封装的工具即可.下方代码有点多,但基本上都加注释了. 切片上传百度云和上传到本地有所不同,上传到本地是需要前端给个唯一标识,通过自定义唯一标识保存到本地,最后在合并文件.而上传百度云则需要直接把切片传到百度云,唯一标识uploadId是百度云提供的,上传及合并都是直接调用百度云提供的接口.下方为百度云的使用文档. 对象存储BOS - 文件管理 | 百

  • vue实现大文件分片上传与断点续传到七牛云

    问题: 前段时间做视频上传业务,通过网页上传视频到服务器. 视频大小 小则几十M,大则 1G+,以一般的HTTP请求发送数据的方式的话,会遇到的问题: 1.文件过大,超出服务端的请求大小限制: 2.请求时间过长,请求超时: 3.传输中断,必须重新上传导致前功尽弃: 探索过程: 1.原先咨询过组里的大佬给我推荐了百度的webupload,但后来引入之后发现它是基于jquery封装的.由于本身项目是基于vue开发的所以与jquery相关的开源框架就尽量不考虑了. 2.后来查阅了资料后自己手动实现了文

  • vue实现Excel文件的上传与下载功能的两种方式

    一.前言项目中使用到比较多的关于Excel的前端上传与下载,整理出来,以便后续使用或分析他人. 1.前端vue:模板下载与导入Excel 导入Excel封装了子组件,点击导入按钮可调用子组件,打开文件上传的对话框,上传成功后返回结果 <el-col style="padding: 10px 0 20px;"> <el-button class="pull-right" icon="el-icon-upload" type=&qu

  • Vue.Js及Java实现文件分片上传代码实例

    说明 代码从项目中剥离修改,未经测试,仅提供思路. 前端 upload(file) { //从后台获取已经上传的文件分片数 getIdx(md5) .then(function(res) { let retry = 3; uploadPart(retry, file, res.data); }) .catch(); } uploadPart(retry, file, idx) { //设置分片大小(单位Byte) let bufferLength = 1024 * 1024 * 5; //计算开

  • 详解Vue ElementUI手动上传excel文件到服务器

    概述 具体需求场景如下: 选择excel文件后,需要把导入的excel文件手动上传到后台服务器,并将导入成功后的统计结果显示出来.官网也有手动上传的示例,通过 action="url" 传入地址的方式,但在实际项目中请求需要自己配置,下面具体说明实现的方法. 说明: 在上传文件到展示统计结果,我们后端给了两个接口:首先调用文件上传接口,上传成功后,根据后端返回的mark再调用统计结果接口. 属性设置 .vue文件 <el-row> <div class="e

  • vue上传文件formData上传的解决全流程

    目录 vue上传文件formData上传解决 axios实例的配置关键配置 整体流程解决跨域上传文件跨域上传FormData格式等问题 vue 批量上传文件 简单说明一个实现思路 vue上传文件formData上传解决 axios实例的配置关键配置 FormData 上传文件类型有变项目中封装的公共方法需要更改头部请求信息设置为设为 “multipart/form-data” 整体流程解决跨域上传文件跨域上传FormData格式等问题 vue中Dom结构 <input type="file

  • vue.js异步上传文件前后端实现代码

    本文实例为大家分享了vue.js异步上传文件的具体代码,供大家参考,具体内容如下 上传文件前端代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8&qu

随机推荐