AWS s3文档
// 引入AWS SDK for JavaScript
import S3 from 'aws-sdk/clients/s3'
//初始化S3

const AWS_CONFIG = {
  Bucket: '',桶名
  key: {
    accessKeyId: 'xxxx',
    secretAccessKey: 'xxxx', 
    region: 'us-west-1',
  },
}
const s3 = new S3(AWS_CONFIG.key)

//S3上传分为普通文件上传跟分片上传,调用不同API
//普通上传:

    const params = {
      Bucket: '桶域名',//发起 PUT 操作的存储桶名称
      Key: '',//上传至存储桶路径
      endpoint: 'xxxx', //s3.语言地区(region).amazonaws.com
      'access-key-id': 'xxxx', //密钥
      'access-key-secret': 'xxxx',
      region: 'us-west-1',//语言地区
      Body: file, //文件本身
      'Access-Control-Allow-Credentials': '*',//跨域配置
      ACL: 'public-read',//读写权限
      ContentType: '', // 文件类型 video/MP4 image/jpeg等
    }
    // 上传S3
    s3.upload(params, (data) => {
     console.log(data)
    }).on('httpUploadProgress', function (e) {
      // 进度条
      let plan = (parseInt(String(e.loaded), 10) / parseInt(String(e.total), 10)) * 100
      plan = parseInt(plan.toFixed(2))
      if (plan == 100) {
        upLoadItem.state = ''  //upLoadItem是列表内容数据,用于展示当前上传文件信息
        return
      }
      upLoadItem.state = ''
      upLoadItem.progress = plan
      return
    })

分片上传:先调用开启分片API//s3.createMultipartUpload,然后传分片小文件//s3.uploadPart,最后调用合并分片//API s3.completeMultipartUpload

     const chunkSize = 5 * 1024 * 1024 //定义分片的大小 为5M  采用分片上传时,只能并且只有最后一个分片的size 小于 指定值(默认5M),不然就会报错
      const chunkCount = Math.ceil(file.size / chunkSize) //分片数
      let UploadId = ''//开启分片拿到UploadId 传文件时需要带上
      const params = {
        Bucket: '',
        Key: '',
        ContentType: '',
        ACL: 'public-read',
      }
      // s3开启分片方法
      s3.createMultipartUpload(params, (data) => {
        UploadId = data.UploadId
        let Parts = [] // 分片信息parts,合并时用
        uploadPartFun(1, chunkCount, chunkSize, item, UploadId, Parts, upLoadItem)
      })

      const uploadPartFun = (
          index,
          chunkCount,
          chunkSize,
          item,
          UploadId,
          Parts,
          upLoadItem,
        ) => {
        let i = index - 1
        let start = i * chunkSize
        let end = Math.min(item.file.size, start + chunkSize)
        let _chunkFile = item.file.slice(start, end) //分片文件
        // 计算百分比
        upLoadItem.progress = Math.ceil((index / chunkCount) * 100)
        const params = {
          Bucket: '',
          Key:'',
          UploadId: UploadId,
          Body: _chunkFile,
          PartNumber: index,
        }
        s3.uploadPart(params, ( data) => {
            // 成功调自身下一次
            let obj = {
              ETag: data.ETag,
              PartNumber: index,
            }
            Parts.push(obj)
            if (index === chunkCount) {
              // 最后一次
              const params = {
                Bucket: '',
                Key: '',
                UploadId: UploadId,
                MultipartUpload: { Parts: Parts }, //必传,每次上传小分片返回的成功信息 tags等
              }
              // s3合并分片方法
              s3.completeMultipartUpload(params, (data1) => {
              console.log('合并成功')
              upLoadItem.state = '上传成功'
              upLoadItem.progress = 100
                return false
              })
            }
            uploadPartFun(++index, chunkCount, chunkSize, item, UploadId, Parts, upLoadItem)
        })
      }

//S3下载

s3.getObject({ Bucket: '', Key: '密钥' }, (data) => {
  // 1. 创建一个 Blob 对象
  const blob = new Blob([data.Body], { type: 'application/octet-stream' })
  // 2. 创建一个 URL 对象
  const downloadUrl = URL.createObjectURL(blob)
  const eleLink = document.createElement('a')
  eleLink.style.display = 'none'
  eleLink.href = downloadUrl
  eleLink.download = name
  document.body.append(eleLink)
  eleLink.click()
  eleLink.remove()
})


Victory
23 声望1 粉丝

专业CV战士