前端阿里云OSS分片上传

最新推荐文章于 2024-07-30 15:37:33 发布
最新推荐文章于 2024-07-30 15:37:33 发布
阅读量604 收藏 1
点赞数
文章标签： reactjs npm javascript typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LOVVme/article/details/112916517
版权

前端阿里云OSS分片上传

npm i ali-oss

原生(Input) VS AntDesign(upload)

原生Input

import { useState } from 'react'
import OSS from 'ali-oss'
import moment from 'moment'
import { useRequest } from 'ahooks'
import { getSecurityToken, insertRecord } from '@/service/upload'
import { generateFileName, guid } from '@/utils'
import { filePreview } from '@/service/user'
// 认证信息 // STS凭证
let credentials: {
  accessKeyId: string;
  accessKeySecret: string;
  stsToken: string;
  expiration: string;
}
const bucket = 'xxx****xxx' // bucket名称
const region = 'xxx****xxx' // oss服务区域名称
const partSize = 1 * 1024 * 1024 // 每个分片大小为1M
const parallel = 3 // 同时上传分片个数
const ossClientMap: any = {} // oss客户端实例
const checkpointMap: any = {} // 所有分片上传文件的检查点
const fileNameMap: any = {} // 文件名
function useOSS() {
  const [percent, setPercent] = useState(0) // 进度
  const [uuid] = useState(guid()) // 产生一个全球唯一标识符
  const [curUrl, setcurUrl] = useState<string>('')
  // 获取STS Token
  function getCredential() {
    return getSecurityToken().then((res) => {
      credentials = {
        accessKeyId: res.accessKeyId,
        accessKeySecret: res.accessKeySecret,
        stsToken: res.token,
        expiration: res.expiration,
      }
      return res
    })
  }

  // 创建OSS Client
  function initOSSClient() {
    ossClientMap[uuid] = new OSS({
      ...credentials,
      bucket,
      region,
    })
  }
  // 文件直传
  const { run, data } = useRequest(insertRecord, {
    manual: true,
  })

  // 普通文件直传
  async function commonUpload(file: File) {
    if (!ossClientMap[uuid]) {
      await initOSSClient()
    }
    return ossClientMap[uuid].put(fileNameMap[uuid], file).then(async (result: any) => {
      run(file.name, file.size, result.name).then((res) => {
        filePreview(res.fileId).then((e) => {
          setcurUrl(e?.url)
        })
      })
    }).catch((err: Error) => {
      console.error(err)
      throw err
    })
  }

  // 断点续传
  async function resumeMultipartUpload() {
    Object.values(checkpointMap[uuid]).forEach((checkpoint: any) => {
      const { uploadId, file, name } = checkpoint
      ossClientMap[uuid].multipartUpload(uploadId, file, {
        parallel,
        partSize, // 每个part 1MB
        // eslint-disable-next-line no-use-before-define
        progress: onMultipartUploadProgress,
        checkpoint,
      }).then(() => {
        console.log('before delete checkpoints === ', checkpointMap[uuid])
        delete checkpointMap[uuid][checkpoint.uploadId]
        console.log('after delete checkpoints === ', checkpointMap[uuid])
        const url = `http://${bucket}.${region}.aliyuncs.com/${name}`
        console.log(`Resume multipart upload ${file.name} succeeded, url === `, url)
        return url
      }).catch((err: Error) => {
        console.log(err)
      })
    })
  }

  // 分片上传产生的回调函数
  /**
   *
   * @param progress 进度
   * @param checkpoint 检擦点
   */
  async function onMultipartUploadProgress(progress: any, checkpoint: any) {
    // 进度更新
    const percentNum = Number.parseInt(`${progress * 100}`, 10)
    setPercent(percentNum)
    console.log(percent)

    checkpointMap[uuid] = {
      [checkpoint.uploadId]: checkpoint,
    }
    // 判断STS Token是否将要过期，过期则重新获取
    const { expiration } = credentials
    const timegap = 14
    // eslint-disable-next-line no-undef
    if (expiration && moment(expiration).subtract(timegap, 'minute').isBefore(moment())) {
      console.log(`STS token will expire in ${timegap} minutes，uploading will pause and resume after getting new STS token`)
      if (ossClientMap[uuid]) {
        ossClientMap[uuid].cancel()
      }
      await getCredential()
      await resumeMultipartUpload()
    }
  }
  // 分片上传
  async function multipartUpload(file: File) {
    if (!ossClientMap[uuid]) {
      await initOSSClient()
    }
    return ossClientMap[uuid].multipartUpload(fileNameMap[uuid], file, {
      parallel,
      partSize,
      progress: onMultipartUploadProgress,
    }).then((result: any) => {
      const url = `http://${bucket}.${region}.aliyuncs.com/${fileNameMap[uuid]}`
      run(file.name, file.size, result.name).then((res) => {
        filePreview(res.fileId).then((e) => {
          setcurUrl(e?.url)
        })
      })
      return url
    }).catch((err: any) => {
      console.error(err)
      throw err
    })
  }

  const upload: any = async (file: File) => {
    try {
      setcurUrl('')
      setPercent(0)
      checkpointMap[uuid] = {}
      // 获取STS Token
      await getCredential()
      // 生成文件名
      fileNameMap[uuid] = generateFileName(file)
      // 如果文件大学小于分片大小，使用普通上传
      if (file.size < partSize) {
        await commonUpload(file)
      } else {
        await multipartUpload(file)
      }
    } catch (error) {
      if (error?.status !== 0) {
        throw error
      }
      return null
    }
  }
  // 暂停上传
  function stop() {
    if (ossClientMap[uuid]) ossClientMap[uuid].cancel()
  }

  // 续传
  function resume() {
    if (ossClientMap[uuid]) resumeMultipartUpload()
  }
  return {
    upload,
    percent,
    stop,
    resume,
    curUrl,
    fileId: data?.fileId,
  }
}
export default useOSS

ant Design ( upload ) 组件

/* eslint-disable no-console */
/* eslint-disable no-use-before-define */
import { useState } from 'react'
import OSS from 'ali-oss'
import moment from 'moment'
import { useRequest } from 'ahooks'
import { getSecurityToken, insertRecord } from '@/service/upload'
import { generateFileName, guid } from '@/utils'

type CustomRequestOptions = {
  onProgress?: (event: {
    percent: number;
  }, file: File) => void;
  onError?: (error: Error) => void;
  onSuccess?: (response: object, file: File) => void;
  data?: object;
  filename?: string;
  file: File;
  withCredentials?: boolean;
  action?: string;
  headers?: object;
}

let credentials: {
  accessKeyId: string;
  accessKeySecret: string;
  stsToken: string;
  expiration: string;
} // STS凭证
const bucket = 'xxx****xxx' // bucket名称
const region = 'xxx****xxx' // oss服务区域名称
const partSize = 1 * 1024 * 1024 // 每个分片大小1MB
const parallel = 3 // 同时上传的分片数
const ossClientMap: any = {} // oss客户端实例
const checkpointMap: any = {} // 所有分片上传文件的检查点
const optionMap: any = {}
const fileNameMap: any = {}
export function useOss(newPath: string = '') {
  const [percent, setPercent] = useState(0)
  const [loading, setLoading] = useState(false)
  const [uuid] = useState(guid())
  // 获取STS Token
  function getCredential() {
    return getSecurityToken().then((res) => {
      credentials = {
        accessKeyId: res.accessKeyId,
        accessKeySecret: res.accessKeySecret,
        stsToken: res.token,
        expiration: res.expiration,
      }
      return res
    })
  }

  // 创建OSS Client
  function initOSSClient() {
    ossClientMap[uuid] = new OSS({
      ...credentials,
      bucket,
      region,
    })
  }

  // 文件直传
  const { run } = useRequest(insertRecord, {
    manual: true,
  })

  // 普通上传
  async function commonUpload(file: any, type?: boolean) {
    let folderPath = ''
    if (type) {
      const folder = file?.webkitRelativePath.split('/')
      folderPath = `${folder.splice(0, folder.length - 1).join('/')}/`
    }
    if (!ossClientMap[uuid]) {
      await initOSSClient()
    }
    return ossClientMap[uuid].put(newPath + folderPath + fileNameMap[uuid], file).then((resFile: any) => {
      const { url } = resFile
      // if (newPath) {
      //   url = `http://${bucket}.${region}.aliyuncs.com/${newPath}${folderPath}${fileNameMap[uuid]}`
      // } else {
      //   url = `http://${bucket}.${region}.aliyuncs.com/${fileNameMap[uuid]}`
      // }
      run(
        file.name,
        file.size,
        resFile.name,
        newPath + folderPath,
      ).then((res) => {
        optionMap[uuid].onSuccess(
          { fileId: res?.fileId, url }, optionMap[uuid].file,
        )
        setLoading(false)
      })
      return url
    })
      .catch((err: Error) => {
        console.error(err)
        throw err
      })
  }

  // 断点续传
  async function resumeMultipartUpload() {
    Object.values(checkpointMap[uuid]).forEach((checkpoint: any) => {
      const { uploadId, file, name } = checkpoint
      ossClientMap[uuid].multipartUpload(uploadId, file, {
        parallel,
        partSize,
        progress: onMultipartUploadProgress,
        checkpoint,
      }).then(() => {
        delete checkpointMap[uuid][checkpoint.uploadId]
        const url = `http://${bucket}.${region}.aliyuncs.com/${name}`
        optionMap[uuid].onSuccess({ fileId: null, url }, optionMap[uuid].file)
        return url
      }).catch((err: Error) => {
        console.error(err)
        throw err
      })
    })
  }

  // 分片上传进度改变回调
  async function onMultipartUploadProgress(
    progress: number,
    checkpoint: any,
  ) {
    const percentNum = Number.parseInt(`${progress * 100}`, 10)
    setPercent(percentNum)
    if (optionMap[uuid]) {
      optionMap[uuid].onProgress({ percent: percentNum }, checkpoint.file)
    }
    checkpointMap[uuid] = {
      [checkpoint.uploadId]: checkpoint,
    }
    // 判断STS Token是否将要过期，过期则重新获取
    const { expiration } = credentials
    const timegap = 2
    if (expiration && moment(expiration).subtract(timegap, 'minute').isBefore(moment())) {
      console.log(`STS token will expire in ${timegap} minutes，uploading will pause and resume after getting new STS token`)
      if (ossClientMap[uuid]) {
        ossClientMap[uuid].cancel()
      }
      await getCredential()
      await resumeMultipartUpload()
    }
  }

  // 分片上传
  async function multipartUpload(file: any, type?: boolean) {
    let folderPath = ''
    if (type) {
      const folder = file?.webkitRelativePath.split('/')
      folderPath = `${folder.splice(0, folder.length - 1).join('/')}/`
    }
    if (!ossClientMap[uuid]) {
      await initOSSClient()
    }
    return ossClientMap[uuid].multipartUpload(newPath + folderPath + fileNameMap[uuid], file, {
      parallel,
      partSize,
      progress: onMultipartUploadProgress,
    }).then((resFile: any) => {
      const { url } = resFile
      // if (newPath) {
      //   url = `http://${bucket}.${region}.aliyuncs.com/${newPath}${folderPath}${fileNameMap[uuid]}`
      // } else {
      //   url = `http://${bucket}.${region}.aliyuncs.com/${fileNameMap[uuid]}`
      // }

      run(
        file.name,
        file.size,
        resFile.name,
        newPath + folderPath,
      ).then((res) => {
        optionMap[uuid].onSuccess(
          { fileId: res?.fileId, url }, optionMap[uuid].file,
        )
        delete ossClientMap[uuid]
        delete optionMap[uuid]
        delete fileNameMap[uuid]
        delete checkpointMap[uuid]
        setLoading(false)
      })
      return url
    }).catch((err: Error) => {
      console.error(`Multipart upload ${file.name} failed === `, err)
      throw err
    })
  }

  const upload: any = async (initOptions: CustomRequestOptions, type?: boolean) => {
    try {
      setLoading(true)
      checkpointMap[uuid] = {}
      // 获取STS Token
      await getCredential()
      optionMap[uuid] = initOptions
      fileNameMap[uuid] = generateFileName(optionMap[uuid].file)
      if (optionMap[uuid].file.size < partSize) {
        return commonUpload(optionMap[uuid].file, type)
      }
      return multipartUpload(optionMap[uuid].file, type)
    } catch (error) {
      if (error?.status !== 0) {
        initOptions.onError?.(error)
        throw error
      }
      return null
    }
  }

  // 暂停上传
  function stop() {
    if (ossClientMap[uuid]) ossClientMap[uuid].cancel()
  }

  // 续传
  function resume() {
    if (ossClientMap[uuid]) resumeMultipartUpload()
  }

  return {
    stop,
    resume,
    upload,
    percent,
    loading,
  }
}
☀靓果果☀
关注
阿里云分片上传oss
tjg888888的博客
04-11 1119
第一步通过composer安装阿里云oss 第二步使用的控制器上面引入 use think\Request; use OSS\OssClient; use OSS\Core\OssException; use OSS\Core\OssUtil; 接口如下 //文件上传阿里云oss(分片上传) function sendossneaf(Request $request){ $uploadFile=$request->file('img_url'); $...
PHP上传大文件视频到阿里云oss分片上传
fzxyxf1314的博客
07-30 1443
下载阿里云oss的SDK composer require aliyuncs/oss-sdk-php 上传视频,我用的是分片上传,其实阿里云的文档已经写得很清楚了,不过这是当我把上传的功能写出来后才这样觉得的,在没有写出来的时候我当时觉得他的文档写的一点都不清楚,所以我才决定写篇文章记录下 下面的代码是复制阿里文档的,本文主要是解释说明下其中的几个参数 : $accessKeyId,$accessKeySecret这两个值都是可以在阿里云的账号中获取到的 $endpoint是oss仓库中的 Endpo
易语言-阿里云oss分片上传
06-26
易语言-阿里云oss分片上传源码
阿里云oss分片上传，大文件上传
weixin_52041354的博客
11-02 663
阿里云oss分片上传，一定要注意，当分片上传的时候，一般都是大文件，文件上传可能时间很长，一定要注意修改前端响应时间，如果配有网关，网关请求时间酌情修改，使用Nginx代理时，nginx.config 也要修改时间参数，例如 proxy_read_timeout 300;// 返回uploadId，它是分片上传事件的唯一标识，可以根据这个uploadId发起相关的操作，如取消分片上传、查询分片上传等。// 每个分片不需要按顺序上传，甚至可以在不同客户端上传，OSS会按照分片号排序组成完整的文件。
阿里云 OSS大文件分片上传
2303_78788923的博客
07-30 1287
获取我们将要上传的视频，在前端通过spark-md5 对大文件每一个分片生成MD5哈希值保证数据在传输过程中被篡改或替换，保障数据的安全性。1.首先我们通过在阿里云OSS对象存储控制台创建Bucket。创建成功以后 我们需要到ARM去开启授权。AccessKeyId需要自己创建。2.进入OSS对象存储控制台。后端 Controller。基于阿里云OSS对象存储。首先在yml配置这些。点击创建Bucket。设置Bucket属性。
阿里云oss web上传demo.rar
08-17
8. **优化策略**：对于大文件，可以使用分片上传，将大文件切割成多个小块，逐个上传，最后再合并。这样可以提高上传的成功率和速度。 9. **成本控制**：阿里云OSS计费基于存储量和流量，开发者可以根据需求选择...
纯前端使用vue+element+阿里云oss上传图片+分片上传
weixin_44408598的博客
04-26 4781
1 安装依赖 npm install ali-oss 2 创建Bucket 3 Bucket配置 新建跨域规则 4 Access Key的获取 主账户和子账户都可，因为我们是前端使用，安全起见，建议使用子账户 选择以下两个权限： 获取子账户的key 点击进入后，在页面下方创建新的AccessKey，获得账号密码，保存下来备用 5 前端部分 使用element的el-up...
vue 阿里云OSS分片上传(可获取上传进度)
u010613970的博客
08-27 2732
之前做过一个上传功能，需求是需要上传到阿里云OSS，之前一直想要做下记录，一直懒，今天反正有空，就在这里做下记录吧 其实因为之前一直没做过这类的OSS上传功能，所以其实也是研究了很久的。上代码，基于vue做的上传，一些地方会做注释 // 先用命令行安装ali-oss // npm i ali-oss --save async getFile(file){ console.log(file); this.progressWord = '正在上传'; // 这个是上传的加载动效弹窗 // this
阿里云对象存储OSS-分片上传
竹毛言己
10-30 2848
文章目录对象存储OSS-分片上传什么是分片上传分片上传的实用场景分片上传的三个步骤1、初始化一个分片上传事件2、上传分片3、完成分片上传代码实现问题1、分片上传，上传进度怎么处理？注意事项心得 对象存储OSS-分片上传 什么是分片上传 当使用简单上传（PutObject）功能来上传较大的文件到OSS的时候，如果上传的过程中出现了网络错误，会出现上传失败，重试必须从文件起始位置上传。针对这种情况，O...
summernote集成前端oss上传图片到阿里云服务器
03-22
summernote集成前端oss上传图片到阿里云服务器 。
js代码实现图片上传阿里云OSS
11-29
基于plupload封装 支持html5,flash,silverlight,html4 等协议上传 可以运行在PC浏览器，手机浏览器，微信 可以选择多文件上传 显示上传进度条
文件上传（普通上传，oss上传，oss大文件分段上传）
11-03
基于java语言实现文件的本地上传，oss普通上传，和大文件的分段上传，请手写的，可以使用，可以上传图片，视频压缩包等多种格式文件
oss实现js上传
12-23
oss实现js上传，极大提高服务器效率，希望大家多多交流
阿里云oss分片上传示例
lost_time_1943的博客
09-13 6484
oss分片上传示例
阿里云oss文件分片、断点续传上传
m0_49106791的博客
08-18 6515
阿里云oss文件分片、断点续传上传 1、概述 把文件上传到阿里云oss上有两种上传方案： （1） 表单提交 （2）阿里云sdk 表单提交操作简单只需要向bucket所在地址发起post请求，并携带上签名，具体的可以由javaScript在前端生成，或者是由自己项目服务端生成，上传文件时需要先获取签名然后再携带上签名的参数向oss服务器上传文件。表单操作便捷，但有三大痛点，第一点是它不支持断点重传，第二它不支持分片上传，第三，它对批量上传不太友好，我曾经实践过，使用表单提交获取的签名只能使用一次，要想通过表单
阿里云OSS文件上传
Jean·z的博客
02-07 2081
1. 前端要想进行文件上传必须定义一个form表单并且在表单中要定义一个表单项 type="file"2. 表单提交方式必须为post方式, 文件上传这些文件一般都比较大, 所以使用post方式3. 在form表单当中我们需要 enctype 这个属性来指定表单的编码格式为 ="multipart/form-data" 因为普通默认的编码格式是不适合传输大型二进制数据的.enctype默认取值即使不设置默认也是这个值, 对于常规表单来说直接将enctype设置为默认值没问题的。
拓展大文件上传（分片上传、断点续传、秒传）：上传阿里云OSS
m0_73363097的博客
06-22 776
上篇将大文件上传到文件服务器，本篇在上篇基础上结合阿里云api实现将大文件上传大阿里云OSS。阿里云分片示例地址：阿里云。
客户端实现阿里云OSS文件上传（分片上传，断点续传）
CYL_2021的博客
07-30 3159
阿里云OSS（Object Storage Service）是一种稳定、安全、高扩展性的云存储服务，它允许您以低成本、高可靠、高可用的方式存储和访问任意类型的数据。在实际应用中，文件上传是一个常见的功能需求。为了提高上传效率和文件完整性，我们可以使用分片上传和断点续传技术。
vue3+vite 阿里云OSS分片上传并监控进度
最新发布
09-17
Vue3 和 Vite 结合阿里云 OSS（Object Storage Service，对象存储服务）进行分片上传并监控进度，可以创建一个高效的文件上传组件，通常通过前端JavaScript配合后端API来实现。以下是简要步骤： 1. **安装依赖**: - 使用 npm 或 yarn 安装 `axios`（用于发送HTTP请求）和 `vue-upload-file` 或类似的上传插件。 ```bash npm install axios vue-upload-file @vue/cli-plugin-vite @vue/cli-service-dev ``` 2. **配置Vite**: 在`.env`或`vite.config.js`中添加阿里云OSS的相关配置，如访问密钥、凭证等。 3. **创建组件**: 创建一个自定义的上传组件，使用`vue-upload-file`库处理文件分片上传。例如，你可以创建一个`UploadComponent.vue`: ```html <template> <div> <input type="file" ref="fileInput" /> <button @click="upload">开始上传</button> <p>上传进度: {{ progress }}%</p> </div> </template> <script> import { useFileUpload } from 'vue-upload-file' export default { setup() { const { uploadFile, progress } = useFileUpload({ url: '/api/upload', // 后端接收分片上传的URL onBeforeProgress: (file) => { // 开始分片前的操作，比如设置最大分片数 }, onStart: () => { // 分片上传开始时的回调 }, onProgress: (progress) => { // 监控每个分片上传的进度 }, onFinish: (response) => { // 上传完成后处理响应 }, onError: (error) => { // 错误处理 } }) const handleUpload = async () => { await uploadFile() } return { upload, progress, handleUpload } } } </script> ``` 4. **后端接口**: 设计后端接口来接收分片数据，并在每次接收到部分上传的数据时更新数据库状态，同时返回上传的唯一标识以便后续合并。 5. **进度同步**: 根据后端返回的上传状态，可以在前端持续更新进度展示。 6. **错误处理**: 要处理网络中断、服务器错误等情况，保证用户得到明确的反馈。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值