文件切片上传

 XMLHttpRequest上传

// 切片大小,单位字节
const chunkSize = 1024 * 1024;

// 文件对象
let fileObj = null;

// 当前切片索引
let chunkIndex = 0;

// 当前切片的起始字节
let startByte = 0;

// 当前切片的结束字节
let endByte = 0;

// 总共的切片数
let totalChunks = 0;

// 创建 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();

// 选择文件
document.querySelector('#file').addEventListener('change', function (event) {
  fileObj = event.target.files[0];
  totalChunks = Math.ceil(fileObj.size / chunkSize);
});

// 点击上传按钮
document.querySelector('#uploadBtn').addEventListener('click', function () {
  // 第一次上传
  if (chunkIndex === 0) {
    startByte = 0;
    endByte = chunkSize;
  } else {
    startByte = endByte;
    endByte = startByte + chunkSize;
  }

  // 如果是最后一个切片,则 endByte 为文件大小
  if (chunkIndex === totalChunks - 1) {
    endByte = fileObj.size;
  }

  // 读取当前切片,并上传
  const chunk = fileObj.slice(startByte, endByte);
  xhr.open('POST', '/upload_chunk');
  xhr.setRequestHeader('Content-Type', 'application/octet-stream');
  xhr.setRequestHeader('x-chunk-index', chunkIndex.toString());
  xhr.setRequestHeader('x-total-chunks', totalChunks.toString());
  xhr.setRequestHeader('x-file-name', fileObj.name);
  xhr.send(chunk);

  // 切片索引 +1
  chunkIndex++;

  // 如果还有切片,则继续上传
  if (chunkIndex < totalChunks) {
    setTimeout(function () {
      document.querySelector('#uploadBtn').click();
    }, 1000);
  }
});

 axios上传FormData对象

onDfiles() {
	let size = 1024 * 10
	let filesp = []
	let index=0
	for (let i = 0; i < this.$refs.DFiles.files[0].size; i = i + size) {
		filesp.push({
			hash:index++,
			filescheck:this.$refs.DFiles.files[0].slice(i,i+size)
		})
	}
	for(let i=0;i{
			console.log(res)
		}).catch(err=>{
						
		})
	}
}

你可能感兴趣的:(前端,javascript,vue.js)