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屬性值