zoukankan      html  css  js  c++  java
  • 前端直传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} />

    完美~

    
    
    
  • 相关阅读:
    [LC] 252. Meeting Rooms
    [LC] 243. Shortest Word Distance
    [LC] 215. Kth Largest Element in an Array
    [LC] 8. String to Integer (atoi)
    [LC] 367. Valid Perfect Square
    [LC] 66. Plus One
    [LC] 7. Reverse Integer
    [GeeksForGeeks] Print all nodes that don't have sibling in a binary tree.
    [Coding Made Simple] Maximum Sum Subsequence Non-adjacent
    [Coding Made Simple] Longest Bitonic Subsequence
  • 原文地址:https://www.cnblogs.com/jinzhou/p/12956788.html
Copyright © 2011-2022 走看看