前端直传oss

时间：2020-05-25 15:40:32 阅读：69 评论：0 收藏：0 [点我收藏+]

标签：data- 配置 capture deb 云安全 onchange 阿里 uri 建议

业务使用oss更能，前端直接上传，可以显示上传进度

首先需要配置oss，

文档中给出了事例

登录OSS管理控制台。
单击Bucket列表，之后单击目标Bucket名称。
单击权限管理 > 跨域设置，在跨域设置区域单击设置。
单击创建规则，配置如下图所示。

解压事例之后，可以在demo体验，采用了Plupload，功能比较强大

理解他的案例花了我不少时间

看到这，您要问了，我特么就像一把嗦，直接复制那种，有吗？有！

npm install ali-oss


let client = new OSS({
  region: ‘<oss region>‘,
    //云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，创建并使用STS方式来进行API访问
    accessKeyId: ‘<Your accessKeyId(STS)>‘,
    accessKeySecret: ‘<Your accessKeySecret(STS)>‘,
    stsToken: ‘<Your securityToken(STS)>‘,
    bucket: ‘<Your bucket name>‘
});

　　upoadFile = (e) => {

　　　　const file = e.target.files[0]

　　　　const requestCode = sessionStorage.getItem("requestCode")

　　　　const data = `${requestCode}_${(new Date).valueOf()}`

　　　　client.multipartUpload(`/${你的oss路径}/${data}`, file).then((result) => {

　　　　　　if (result.res.status) {

　　　　　　　console.log(result)

　　　　　　}

　　　　})

　　　　.catch((e) => {　　　　

　　　　　　Toast.info(‘视频上传失败‘, 2, null, false)

　　　　　　this.props.history.push(‘/Error‘)

　　　　})

　　}

html部分

<input type="file" accept="video/*" capture  onChange={this.upoadFile} />

完美～

前端直传oss

标签：data- 配置 capture deb 云安全 onchange 阿里 uri 建议

原文地址：https://www.cnblogs.com/jinzhou/p/12956788.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行