前端直傳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} />

 

完美～