Vue는 파일 잘라내기 및 업로드를 구현합니다.
실제 개발 프로젝트 과정에서 때때로 상대적으로 큰 파일을 업로드해야 하며 업로드 시간이 상대적으로 느려지므로 백그라운드에서 파일 조각을 업로드하기 위해 프런트 엔드가 필요할 수 있습니다.매우 간단합니다. , 예를 들어 1 G 파일 스트림을 여러 개의 작은 파일 스트림으로 자른 다음 작은 파일 스트림을 전송하도록 인터페이스에 요청합니다.
프로세스에 대한 간략한 설명
파일 조각 가져오기를 구현하려면 먼저 elementUI 또는 원래 업로드 태그를 사용하여 파일 파일 스트림을 얻은 다음 파일이 이전에 업로드되었는지 여부를 확인하고 이를 백그라운드에 제출해야 합니다. 파일의 고유 식별자, 그리고 백엔드가 백그라운드에 문제가 있는지 여부를 알려줍니다. 이때 백엔드는 다음 세 가지 상태를 반환할 수 있습니다.
- 파일이 없습니다. 모두 업로드해야 합니다.
- 이 파일이 존재하며 프런트 엔드에서 다시 업로드할 필요가 없습니다.
- 이 파일의 일부가 업로드되었으며, 업로드되지 않은 부분은 계속해서 업로드해야 합니다.
이 세 가지 상태만이 있으며 이 단계를 실현하는 중요한 매개 변수는 이 파일의 고유 식별자이며 이 식별자는 이 파일의 MD5 식별 코드를 사용합니다. 따라서 먼저 이 파일의 MD5 고유 식별 코드를 가져와야 합니다.
파일을 업로드하거나 부분적으로 업로드해야 하는 경우 슬라이스 작업을 수행해야 합니다. 이것은 매우 간단합니다.예를 들어 파일의 바이너리 바이트 스트림은 총 1G이고 일반적으로 5M 슬라이스이므로 1G 파일이라면 205 슬라이스로 잘라야합니다.물론 , 마지막 조각이 반드시 5M일 필요는 없으며 파일을 부분적으로 가져오기 위한 요청을 시작하는 파일을 부분적으로 업로드하기 위한 인터페이스로 이동합니다.
우선, 우리가 205개의 조각난 데이터 스트림을 제출한 후 배경을 병합해야 한다는 것이 분명합니다. file은 import를 위해 최종적으로 제출할 파일입니다 백엔드를 병합해야 하고 하나씩 업로드해야 하므로 백엔드는 각 조각이 파일의 어느 부분인지 알아야 합니다. 따라서 단편화 요청을 제출할 때 일반적으로 다음 매개변수를 전달해야 합니다.
- chunk : 일반적으로 0부터 시작하는 조각의 현재 수입니다.
- chunkSize : 조각의 크기로, 일반적으로 5M, 즉 5242880바이트입니다.
- chunks : 총 샤드 수입니다.
- file : 현재 샤드의 파일 스트림.
- md5 : 단편화되지 않은 전체 파일의 MD5 고유 식별 코드입니다.
- name : 현재 파일의 이름.
- size : 현재 조각 크기(마지막 블록이 반드시 5M이 아닌 경우).
이렇게 하면 백엔드에서 최종 파일을 병합하는 방법을 알 수 있습니다. 물론 특정 필드는 백엔드에서 정의해야 하고 이 아이디어에 따라 적절하게 연결할 수 있습니다.
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 식별 코드를 얻은 후 백그라운드에서 제출해야 한다고 하므로 파일을 슬라이스하여 처음부터 제출하거나 작업의 일부를 제출해야 합니다.필요하지 않은 경우 병합을 사용하십시오. 병합 인터페이스는 실제로 배경에 병합하라고 지시하며, 파일 관련 매개변수를 제외한 다른 매개변수를 배경에 전달하기만 하면 됩니다.
파일 슬라이싱은 문자열 가로채기와 유사하며 여기서는 바이트를 가로채는 것입니다. 우리는 스스로 필요한 매개변수를 얻을 수 있습니다. file 을 가져오기 위해 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) // 把截取的每一片数据保存到数组
}
}
총 슬라이스 청크 수
이전 단계에서 각 파일 스트림의 배열을 얻었으므로 직접 얻을 수 있습니다.
let chunks = chunkList.length
슬라이스 크기
우리는 5M에 따라 자르기 때문에 각 조각의 크기는 5 * 1024 * 10241 . 하지만 마지막 조각이 정확히 5M가 아닐 수 있으므로 .size크기를 직접 얻을 수 있습니다. 예를 들어:
chunkList[0].size // 获取第1片大小
모든 매개변수가 정렬된 후 슬라이스 제출 인터페이스로 이동하여 데이터 제출을 시작하십시오.
병합
모든 슬라이스 데이터를 성공적으로 제출하고 백그라운드에서 슬라이스 파일이 성공적으로 저장되었음을 반환하면 마지막 인터페이스로 이동하여 제출할 수 있습니다.
글쎄, 그게 다야! 마치다! ! !