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} />

    完美~

    
    
    
  • 相关阅读:
    link和@import区别
    常用的正则表达式
    virtual dom
    git常用命令
    系统管理与进程命令
    Shell 命令
    软件安装命令
    vim 详解
    网络命令
    帮助与用户管理命令
  • 原文地址:https://www.cnblogs.com/jinzhou/p/12956788.html
Copyright © 2011-2022 走看看