前端实现大文件/图片的上传 -采用分片上传的形式

需求:当需要上传的文件或图片的较大时,采用分片截取分段的形式上传;
要想实现文件的上传与下载,先得了解下new Blob()对象;
文件上传的对象是blob对象,即二进制大对象;可用于实现文件流的下载

一.new Blob()

  1. 使用a标签中的download的属性进行文件的下载
<p>blob对象; --- 文件的下载/图片的预览</p>
<a download >a标签的download是同源即可下载 </a>
<br>
<a href="" id="btn">下载的a标签</a>

点击添加属性的形式,进行下载;

// 俩个参数,第一个是数组
const str = `
  <div>feeee</div>
`;
const blob = new Blob([str], {
    type: 'text/html'
});
console.log(blob.text()); // 可获取blob的值
// 点击下载a标签
btn.onclick = function(e) {
  this.setAttribute('download', '123.html');
  // 将blob转换成url地址可供href使用
  this.href = URL.createObjectURL(blob); 
}
  1. input的形式添加文件或图片的形式下载;
<p>input选择文件的下载</p>
<input type="file" id="input" />

进行create<a>标签的形式进行,添加url的值进行下载;

input.onchange = function(e) {
  const file = e.target.files[0]; // 继承在load的对象
  console.log(file, "---file");
  // 创建一个a的标签进行下载
  const a = document.createElement('a');
  a.setAttribute('download', 'mybaidu.html');
  a.href = URL.createObjectURL(file);
  a.click();
}

借助于fileReader的形式,进行异步的下载使用:

// 创建下载的图片; 同步的方式进行
// const img = new Image();
// img.src = URL.createObjectURL(file);

const img = new Image();
const fileRead = new FileReader();
fileRead.onload = function() {
  img.src = fileRead.result;
}
fileRead.readAsDataURL(file);
document.body.appendChild(img);

二.实现切片上传的形式

当文件/图片很大时,进行文件的切片递归上传访问:

<p>实现切片上传</p>
<input type="file" id="inputUplad">
<button id="uploadBtn">切片上传</button>

js的实现:

// 切片上传
let chunkSize = 1024 * 10;
let index = 0;
const inputUplad = document.getElementById('inputUplad');
$('#uploadBtn').click(upload);
function upload() {
    const file = inputUplad.files[0]; // 获取到的上传文件
    if(!file) return;
    const [filename, ext] = file.name.split('.'); // 将文件的名称,后缀解构出来
    let start = index * chunkSize; // 切片的起始位置
    console.log(file.size, start,"file.size")
    if(start > file.size) return; // 大于文件的大小时进行return跳出递归
    //   切片的blob的文件;
    const blob = file.slice(start, start * chunkSize);
    const blobName = `${filename}${index}.${ext}`;
    // 将blob的文件转换为file的文件;
    const blobFile = new File([blob], blobName);
    // 上传用到的formData的格式
    const formData = new FormData();
    formData.append('file', blobFile);
    formData.append('filqe', 22);
    // 上传文件
    fetch('/upload', {
        method: 'post',
        body: formData
    }).then((res) => {
        index++;
        console.log(res)
        upload(); // 进行递归的上传文件处理
    });
}
  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
分片上传指将大文件拆分成若干小块进行上传,可以有效地提高上传的效率和稳定性,降低上传失败的概率。在前端Vue框架中,可以使用插件或组件实现分片上传功能,例如Element-UI或Vue-Upload-Component。而在后端Java中,可以使用SpringBoot或SpringMVC进行文件上传处理,同时结合使用阿里云、七牛云等云存储服务提高上传速度和可靠性。 具体实现流程如下: 1. 前端分片上传前端先通过文件选择器选择要上传文件,然后使用分片算法将大文件拆分成小块进行上传,每个小块的大小可以自行设置。前端也需要处理上传过程中的中断、暂停、恢复等问题,以确保文件上传的完整性和稳定性。 2. 后端接收上传请求:后端使用SpringBoot或SpringMVC接收前端上传请求,包括文件信息和文件分块信息。后端可以对请求做一些校验,例如文件是否存在,上传文件大小是否超过限制等等。 3. 后端分块合并:后端通过计算分块的MD5值,将分块合并成完整的文件。合并后的文件可以临时存储在本地磁盘,也可以直接上传到阿里云、七牛云等云服务提供商的存储空间中。 4. 后端上传完毕事件:文件上传完毕后,后端会返回相应的上传结果给前端前端可以进行相关处理,例如提示上传成功或上传失败等。 总之,前端Vue和后端Java可以相互配合,实现高效稳定的文件分片上传功能。需要注意的是,在实际项目中,还需要考虑一些安全性和可靠性方面的问题,例如上传速度和可靠性、防止盗链和重复上传等等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值