Browser上傳文件到華為雲/七牛雲 詳細步驟

一、華為雲（OBS BrowserJS）

華為雲上傳示例：跳轉鏈接

參考 鏈接

 

 

 

1、華為雲開通OBS對象存儲，建議使用后端生成簽名認證方式上傳，調取接口來進行獲取key和token。

 

 

 2、下載SDK BrowserJS （esdk-obs-browserjs  3.20.7  ）

使用npm引入即可，下載下來的node_modules里

yarn add esdk-obs-browserjs 

 也可以將上圖的js文件保存在本地文件夾中進行引用。

3、vue文件中引入，進行上傳

import ObsClient from 'esdk-obs-browserjs'

upload (file) {
      const that = this
      const bucketName = 'xxx-bucket' // 桶名
      const serverUrl = 'xxxxx.myhuaweicloud.com' // 服務器地址
      this.importLoading = true
      // 后端生成秘鑰，調取接口進行獲取
      getHuaweiProvisionalSecurityKeyCloud().then(res => {
        console.log(file.name, res)
        var obsClient = new ObsClient({
          access_key_id: res.data.access,
          secret_access_key: res.data.secret,
          security_token: res.data.securitytoken,
          server: serverUrl
        })
        obsClient.putObject({
          Bucket: bucketName,  // 桶名
          Key: file.name,
          SourceFile: file,
          ContentType: 'text/plain'
        }, function (err, result) {
          if (err) {
            console.error('Error-->' + err)
            that.$notification.error({
              message: '上傳失敗，請重試'
            })
          } else {
            if (result.CommonMsg.Status < 300) {
             // 上傳成功后，文件地址
              const fileUrl = 'https://' + bucketName + '.' + serverUrl + '/' + file.name
              that.$notification.success({
                message: '文件上傳成功！'
              })
            } else {
              that.$notification.error({
                message: '上傳失敗，請重試'
              })
              console.log('Code-->' + result.CommonMsg.Code)
              console.log('Message-->' + result.CommonMsg.Message)
            }
          }
        })
      }).catch(() => {
        // catch
      })
    },

 

二、七牛雲（）

參考七牛官方文檔 跳轉鏈接

1、跟華為雲類似，同樣需要后端生成token和key，前端進行獲取。

2、引入qiniu-js

yarn add qiniu-js

3、vue文件中引入，進行上傳

import * as qiniu from 'qiniu-js'


beforeUploadVideo (file) {
   // 獲取秘鑰token
  getQiniuToken().then(res => {
    const token = res.data.token
    const key = file.name
    const observable = qiniu.upload(file, key, token)
    observable.subscribe(next => {
      console.log('next', next)
    }, error => {
      console.log('error', error)
    }, complete => {
      this.url = res.data.domain + complete.key
      console.log('complete-url', res.data.domain + complete.key)
    })
  })
}