vue가 파일 분할 업로드를 구현하는 방법에 대한 간략한 분석

실제 개발 프로젝트 과정에서 상대적으로 큰 파일을 업로드해야 하는 경우가 있는데, 그러면 업로드 속도가 상대적으로 느려지므로 백그라운드에서 파일 조각을 업로드하려면 프런트엔드가 필요할 수 있습니다. 매우 간단합니다. 즉, 예를 들어 1G 파일 스트림을 여러 개의 작은 파일 스트림으로 자른 다음 작은 파일 스트림을 각각 전달하도록 인터페이스를 요청합니다.

Process Brief

파일 조각 가져오기를 구현하려면 먼저 elementUI 또는 기본 업로드 태그를 사용하여 파일 파일 스트림을 얻습니다. 그런 다음 이 파일이 이전에 업로드되었는지 확인해야 합니다. 이 파일에 대한 고유 식별자를 백엔드에 제출한 다음 백엔드에 문제가 있는지 여부를 알려주도록 해야 합니다. 이때 백엔드는 세 가지 상태를 반환할 수 있습니다.

• 파일을 사용할 수 없습니다. , 모든 파일을 업로드해야 합니다.

• 이 파일은 이미 존재하므로 프런트 엔드에서 다시 업로드할 필요가 없습니다.

• 본 파일의 일부가 업로드 되었으며, 업로드되지 않은 부분도 계속해서 업로드 하셔야 합니다.

이 단계를 구현하는 중요한 매개 변수는 파일의 MD5 식별 코드를 사용하는 것입니다. 따라서 먼저 이 파일의 MD5 고유 식별 코드를 가져와야 합니다. [관련 권장사항: vuejs 동영상 튜토리얼, 웹 프론트엔드 개발]

우리는 파일을 업로드해야 하거나 부분적으로 업로드해야 할 때 슬라이싱 작업을 수행해야 한다는 것을 알고 있습니다. 예를 들어 파일의 바이너리 바이트 스트림은 총 1G이고 일반적으로 5M씩 한 조각으로 절단되므로 1G 파일인 경우 205개의 조각으로 절단해야 합니다. 물론 마지막 조각이 반드시 5M일 필요는 없습니다. 그런 다음 파일을 부분적으로 업로드하기 위한 인터페이스로 이동하여 파일을 부분적으로 가져오기 위한 요청을 시작합니다.

우선, 205개의 조각난 데이터 스트림을 제출한 후 백그라운드에서 이를 병합해야 한다는 점을 분명히 해두세요. 즉, 조각에서 제출한 205개의 파일 스트림을 큰 파일로 결합하여 저장해야 합니다. 이렇게 하면 백그라운드 병합이 완료된 파일이 결국 가져오기를 위해 제출하게 됩니다. 백엔드를 병합해야 하고 이를 하나씩 업로드하므로 각 조각이 파일의 어느 부분인지 백엔드에 알려야 합니다. , 오른쪽? 따라서 샤딩 요청을 제출할 때 일반적으로 다음 매개변수를 전달해야 합니다.

• 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)
      }
    });
  }
}

그러면 필요할 때 사용할 수 있습니다. 물론 여기에 반환되는 것은 .then에서 직접 얻을 수 있는 Promise입니다. .then 就可以获取了。

或者是使用 async、 await

또는 async, wait를 사용하세요. 🎜

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片大小

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

合并

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

好了，就这样！完成！！！

（学习视频分享：vuejs入门教程、编程基础视频）

위 내용은 vue가 파일 분할 업로드를 구현하는 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!