基於nodejs的前端直傳oss


# 基於nodejs的前端直傳oss

## 阿里雲oss權限設置、跨域設置

### 權限設置

![UTOOLS1588380940382.png](https://johnnycc.oss-cn-beijing.aliyuncs.com/UTOOLS1588380940382.png)

![UTOOLS1588380971582.png](https://johnnycc.oss-cn-beijing.aliyuncs.com/UTOOLS1588380971582.png)

### 跨域設置

![UTOOLS1588381069493.png](https://johnnycc.oss-cn-beijing.aliyuncs.com/UTOOLS1588381069493.png)

## 安裝ali-oss

npm install ali-oss

## 獲取client對象

```javascript
getClient() {
      let OSS = require('ali-oss')
      this.client = new OSS({
          //服務器地區
        region: 'oss-cn-beijing',
        //Accesstoken中的keyid
        accessKeyId: 'LTAI4FhbwaMVJFsRBDFqqaB6',
          //Accesstoken中的KeySecret
        accessKeySecret: 'haBJpDQYdrUjqkZkUnXNEZT20fvdz9',
          //bucket實例名稱
        bucket: 'johnnycc',
      })
    }
```



## 文件上傳

```javascript
handleFile() {
    //獲取oss對象、client實例
      this.getClient()
    //取得用戶選擇的文件
      this.file = this.$refs.upload.files[0]
      var _this = this
      async function put() {
        try {
          let result = await _this.client.put(
              //傳入文件名
            _this.$refs.upload.files[0].name,
              //傳入文件
            _this.file
          )
          //獲得結果中返回的url
          _this.avatar = result.url
          _this.changeMessage()
        } catch (e) {
          console.log(e)
        }
      }
      put()
    }
```
更多內容請大家關注Johnny博客




免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM