当前位置: 首页 > 工具软件 > OSS Browser > 使用案例 >

阿里云OSS-Browser.js

冯德宇
2023-12-01

为了将大文件存储进行上传并且下载,可能会采取阿里云对象存储OSS,以下根据官网Browserjs进行总结

配置项:

  • accessKeyId:string  通过阿里云控制台创建的access 白
  • accessKeySecret: string  通过阿里云控制台创建的access secret
  • stsToken:string
  • bucket:string  通过控制台创建的bucket
  • endpoint:string   OSS域名
  • region:string bucket所在区域默认 oss-cn-hangzhou
  • internal: Boolean  是使用阿里云内网访问,默认false
  • cname,isRequestPay,secure,timeout(自己官网搜写不动了)

先设置跨域资源共享

const client = new OSS ({配置项})


所有后续处理可使用异步的.then()或async await


上传文件:

1简单上传:不支持进度函数

client.put(文件名,文件,[{headers}])
  • PutObject 接口上传

2分片上传:要上传的大文件分成多个分片来分别上传,上传完成后再调用

  • CompleteMultipartUpload接口将这些分片(part)组合成一个文件(object)来达到断点续传效果,大于100mb文件推荐分片上传
client.MultipartUpload (文件名,文件,{...args} )

参数args:

  • 获取分片上传进度、断点和返回值  progress: (p,cpt,res) => {},
  • 并发上传分片数量parallel:4
  • 分片大小,默认为1MB最小为1 kb  : partsize:1024×102 4
  • headers, meta,mime

3取消分片上传:已上传的分片数据会被删除

  • 先在 multipartyUpload中的progress函数为中断点赋值,即
progress: (p,cpt,res)=>{abortCheckpoint=cpt}
//abortCheckpoint是变量名
//然后使用
client.absortMultipartUpload(abortCheckpoint.name,absortCheckpoint.uploadId)


4列举已上传分片:列出指定uploadId下所有已上传成功分片

  • 先为中断点赋值、详情⻅3
  • 然后使用
client.listParts(name,absortCheckpoint.uploadId).then({})


5列举分片上传事件:列举出所有执行中的分片上传事件即已初始化但尚未完成或已取消的分片上传事件

client.listUploads({参数})


6断点续传上传:可指定断点记录点,上传过程中若出现异常导致文件上传失败时将从记录点处继续上传未传部分

  • 先为中断点赋值、详情⻅3
  • ( 暂停上传 client.cancel( ) )
  • 然后使用
client.multipartUpload(文件名,文件,{checkpoint:abortCheckpoint,
progress:(p,cpt,res)=>{checkpoint=cpt})


7上传回调:在发送给OSS的请求中携带callback参数即可在完成文件上传时提供回调给应用服务器


可使用在各种请求中,

{callback:{
url:””,//回调请求的服务器地址
host:’’,//为服务器配置的host值
body:”” //发起回调时请求body的值
contentType:’’, //发起回调请求的content-type
customValue:{}, //发起回调请求的自定义参数}}


下载文件:

1获取文件预览URL:

url= client.signatureUrl (object完整路径不包括bucket名,{可选参数})

  • 可选参数:expires:3600 文件URL的有效时⻓默认为1800秒

2获取文件的下载URL:配置响应头实现通过URL访问时自动下载文件并设置下载后的文件名

const filename = 'examplefile.txt' 
const response = {
  'content-disposition': `attachment; filename=${encodeURIComponent(filename)}`
}
const url= client.signatureUrl (object完整路径不包括bucket名,{response})


3范围下载:下载指定范围内数据

  • 对于大小为1000字节文件正常字节范围0-999,若指定范围无效则下载整个文件
const start=0, end=999
client.get(object完整路径不包括bucket名,{
headers:{
Range:`bytes=${start}-${end}`,
}}) .then(r => {
// 将返回的数据通过Blob的形式转为可下载的Object。
const newBlob = new Blob([r.content], { type: r.res.headers['content-type'] });
// 创建标签。
const link = document.createElement('a')
// 将标签绑定href属性。
link.href = window.URL.createObjectURL(newBlob)
// 指定下载后的本地文件名称。
link.download = 'example.txt'
// 下载Object。
link.click()
// 移除绑定的URL。
window.URL.revokeObjectURL(link.href)
})


4限定条件下载:可指定一个或多个条件,满足则下载,不满足则返回错误

client.get(object完整路径不包括bucket名, {
headers: {
// 在请求头If-Modi ed-Since中指定时间,如果指定的时间早于文件实际修改时间,则下载文
件。如果指定的时间等于或者晚于文件实际修改时间,则返回304 Not Modi ed。
"If-Modi ed-Since": new Date("1970-01-01").toGMTString()// 在请求头If-Unmodi ed-Since中指定时间,如果指定的时间等于或者晚于文件实际修改时间,
则下载文件。如果指定的时间早于文件实际修改时间,则返回412 Precondition Failed。
"If-Unmodi ed-Since": new Date(1970-01-01).toGMTString()
// 在请求头If-Match中传入ETag,如果传入的ETag和文件的ETag匹配,则下载文件。如果传入
的ETag和文件的ETag不匹配,则返回412 Precondition Failed。
"If-Match": '5B3C1A2E0563E1B002CC607C****'
// 在请求头If-None-Match中传入ETag,如果传入的ETag和文件的ETag不匹配,则下载文件。
如果传入的ETag和文件的ETag匹配,则返回304 Not Modi ed。
"If-None-Match": '5B3C1A2E0563E1B002CC607C****'
},
}).then(r => {
if (r.content.length > 0) {
const newBlob = new Blob([r.content], { type: r.res.headers['content-type'] });
const link = document.createElement('a')
link.href = window.URL.createObjectURL(newBlob)
link.download = 'foo.txt'
link.click()
window.URL.revokeObjectURL(link.href)
} else {
console.log('错误码', r.res.status)
console.log('没有符合条件的下载项')
}
})


相关API:


简单上传→ PutObject
初始化分片上传→InitialMultipartUpload
分片上传part →UploadPart
完成分片上传→CompleteMultipartUpload
取消分片上传事件→AbortMultipartUpload
列举已上传分片→ListParts
列举分片上传事件→ListMultipartUploads
上传回调→Callback
下载→GetObject

 类似资料: