ali-oss web + 微信小程式 使用

記錄一下看到大佬封裝的ali-oss微信使用，和web使用

ali-oss的npm地址

https://www.npmjs.com/package/ali-oss
複製程式碼

• 微信小程式

程式碼地址

https://gitee.com/Ansxu/wxapp-ali-oss-use.git
複製程式碼

需要更換alioss.js的accessKeyId和accessKeySecret改成你的賬號資訊 在對應需要使用的頁面引入alioss.js，然後use

import { uploadFile } from '../../utils/alioss.js';

// 上傳頭像
  upHeadImg() {
    const that = this;
    //選取頭像
    wx.chooseImage({
      count: 1,
      success(e) {
        let image = e.tempFilePaths[0];
        uploadFile(image).then(function(res){
          if(res.status&& res.data.url){
              const info = that.data.info;
              info.headImg = res.data.url;
              that.setData({
                info
              });
          }else{
            console.log(res);
          }

        },function(res){
            console.log(res);
        });
      },
      fail(err){
        console.log(err);
      }
    })

  }
複製程式碼

• Web

//alioss.js
var OSS = require('ali-oss')

export function client() {
    //桶配置資訊
  var client = new OSS({
    region: 'oss-cn-shenzhen',
    accessKeyId: 'LRAI*e9k1kpr**',
    accessKeySecret: 'iwGDzruu*Cj2FZ*PUhTqlF*NlLdraT',
    bucket: 'ali-oss-demo'
  })
  return client
}

複製程式碼

直接更換ali-oss的accessKeyId和accessKeySecret

put()接收兩個引數，第一個為檔名稱，第二個為上傳的圖片檔案,詳細參考開頭給出連結

import { client } from '@/utils/alioss'
//上傳圖片
uploadImg(file) {
      const that = this
      var fileName = 'img' + file.file.uid
      client().put(fileName, file.file).then((result) => {
        that.row_data.img = result.url
        that.img = result.url
      }).catch((err) => {
        this.$message.error('圖片上傳失敗，原因' + err)
      })
}
複製程式碼

第二引數同input框的type="file"拿到的檔案格式裡的file屬性值