前端直传oss

Posted 2020-12-05 jinzhou

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

 

首先需要配置oss，

文档中给出了事例

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

 

解压事例之后，可以在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} />

 

完美～