前端直传oss

Posted jinzhou

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端直传oss相关的知识,希望对你有一定的参考价值。

业务  使用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} />

 

完美~


 

以上是关于前端直传oss的主要内容,如果未能解决你的问题,请参考以下文章

前端直传oss需要在oss配置域名权限吗

vue前端oss直传(formdata方式)

前端图片直传OSS试验

阿里云 OSS 网页端直传

aliyun oss js直传且使用服务器端生成签名

商城项目09_品牌管理菜单快速显示开关阿里云进行文件上传结合Alibaba管理OSS服务端签名后直传