需求:当需要上传的文件或图片的较大时,采用分片截取分段的形式上传;
要想实现文件的上传与下载,先得了解下new Blob()
对象;
文件上传的对象是blob
对象,即二进制大对象;可用于实现文件流的下载
一.new Blob()
- 使用
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);
}
- 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(); // 进行递归的上传文件处理
});
}