前端大文件上传方案深入解析

前端

2024-01-27 15:07:11

前言

在现代互联网应用中，前端大文件上传是一个常见的需求，如上传视频、图片、文档等。随着文件体积的不断增大，传统的单次上传方式可能会遇到超时、失败等问题。因此，分片上传技术应运而生。

分片上传，顾名思义，就是将大文件切割成多个小块，然后逐一上传到服务器。这种方式可以有效避免大文件上传的超时问题，同时也能提高上传速度。

目前，主流云存储服务提供商，如七牛云、腾讯云等，都提供了分片上传功能。本文将介绍如何利用七牛云和腾讯云的SDK实现前端大文件上传。

七牛云分片上传

1. 环境搭建

首先，需要安装七牛云的SDK，具体安装方法可参考七牛云官方文档。

npm install qiniu

2. 获取上传凭证

上传文件前，需要先获取上传凭证，包括上传地址和上传token。上传凭证可以通过以下方式获取：

const qiniu = require('qiniu')

const accessKey = 'YOUR_ACCESS_KEY'
const secretKey = 'YOUR_SECRET_KEY'
const mac = new qiniu.auth.digest.Mac(accessKey, secretKey)

const options = {
  scope: 'YOUR_BUCKET_NAME',
}

const putPolicy = new qiniu.rs.PutPolicy(options)
const uploadToken = putPolicy.uploadToken(mac)

3. 分片上传

获取上传凭证后，就可以开始分片上传了。分片上传的具体步骤如下：

将大文件切割成多个小块，每个小块的大小不能超过4MB。
将每个小块分别上传到服务器。
将所有小块上传完成后，再将小块合并成一个完整的文件。

const qiniu = require('qiniu')

const accessKey = 'YOUR_ACCESS_KEY'
const secretKey = 'YOUR_SECRET_KEY'
const mac = new qiniu.auth.digest.Mac(accessKey, secretKey)

const options = {
  scope: 'YOUR_BUCKET_NAME',
}

const putPolicy = new qiniu.rs.PutPolicy(options)
const uploadToken = putPolicy.uploadToken(mac)

const config = {
  useCdnDomain: true,
  chunkSize: 4 * 1024 * 1024,
}

const uploader = new qiniu.zone.ZoneUp(config)

const file = 'YOUR_FILE_PATH'
const key = 'YOUR_FILE_KEY'

uploader.upload(file, key, uploadToken, (err, res, info) => {
  if (err) {
    console.error(err)
  } else {
    console.log(res)
  }
})

腾讯云分片上传

1. 环境搭建

首先，需要安装腾讯云的SDK，具体安装方法可参考腾讯云官方文档。

npm install cos-js-sdk-v5

2. 获取上传凭证

上传文件前，需要先获取上传凭证，包括上传地址和上传token。上传凭证可以通过以下方式获取：

const COS = require('cos-js-sdk-v5')

const accessKey = 'YOUR_ACCESS_KEY'
const secretKey = 'YOUR_SECRET_KEY'
const cos = new COS({
  accessKeyId: accessKey,
  accessKeySecret: secretKey,
})

const bucket = 'YOUR_BUCKET_NAME'
const region = 'YOUR_REGION'

const credentials = await cos.getCredentials()

3. 分片上传

获取上传凭证后，就可以开始分片上传了。分片上传的具体步骤如下：

将大文件切割成多个小块，每个小块的大小不能超过10MB。
将每个小块分别上传到服务器。
将所有小块上传完成后，再将小块合并成一个完整的文件。

const COS = require('cos-js-sdk-v5')

const accessKey = 'YOUR_ACCESS_KEY'
const secretKey = 'YOUR_SECRET_KEY'
const cos = new COS({
  accessKeyId: accessKey,
  accessKeySecret: secretKey,
})

const bucket = 'YOUR_BUCKET_NAME'
const region = 'YOUR_REGION'

const credentials = await cos.getCredentials()

const file = 'YOUR_FILE_PATH'
const key = 'YOUR_FILE_KEY'

const multipartUpload = await cos.createMultipartUpload({
  Bucket: bucket,
  Region: region,
  Key: key,
})

const partNumber = 1
const partSize = 10 * 1024 * 1024
const fileOffset = 0

const fileStream = fs.createReadStream(file, {
  start: fileOffset,
  end: fileOffset + partSize - 1,
})

const uploadPart = await cos.uploadPart({
  Bucket: bucket,
  Region: region,
  Key: key,
  PartNumber: partNumber,
  Body: fileStream,
  UploadId: multipartUpload.UploadId,
})

const uploadedParts = [
  {
    PartNumber: partNumber,
    ETag: uploadPart.ETag,
  },
]

const completeMultipartUpload = await cos.completeMultipartUpload({
  Bucket: bucket,
  Region: region,
  Key: key,
  UploadId: multipartUpload.UploadId,
  MultipartUpload: {
    Parts: uploadedParts,
  },
})