评论

阿里云 oss signatureUrl URL预览 方法封装

阿里云 oss signatureUrl URL预览 方法封装

先下载 阿里云提供的 aliyun-oss-sdk.js 在git /dist 目录下

https://github.com/ali-sdk/ali-oss?spm=a2c4g.11186623.2.9.5bd626fdqYCUHP

考虑到重复调用,把代码封装到一个components 小程序自定义组件里

/components/imgurl/imgurl.js

const app = getApp();
var OSS = require('../../dist/aliyun-oss-sdk.min.js');
Component({
  properties: {
    imgdata: {
      type: String,
      observer: function (res) {
        this.setData({
          imgdata: this.data.imgdata
        })
      }
    },
    // 获取图片
    topimg: {
      type: String,
      observer: function (res) {
        let that=this;
        that.setData({
          topimg: this.data.topimg
        })
      }
    },
  },
  data: {
    backimg:"",// 如果不为真图片状态加载中
    imgdata:[],// 获取后台返回oss 签名等信息
    topimg:"",// 存储处理后的图片
  },
  /*组件生命周期*/ 
  lifetimes: {
    ready() {
      // 调用info 方法
      this.info();  
    },
  },
  methods: {
    info:function(){
      let that=this;
      // oss存储 Bucket 路径 
      let imgsrc=this.data.topimg;
      console.log(imgsrc);
      if(!imgsrc || imgsrc==''){
        return
      }
      if(!this.data.imgdata){
        return
      }
      // 传过来的参数json 格式化
      let result = JSON.parse(this.data.imgdata);
      let client = new OSS({
          region: result.region,//地域
          endpoint: result.endpoint, //访问域名
          accessKeyId: result.credentials.accessKeyId,//标识用户ID
          accessKeySecret:  result.credentials.accessKeySecret,//用户验证签名密钥
          stsToken:result.credentials.securityToken,// 授权token
          bucket: result.bucket,//Bucket 存储名称
          secure: true
      });
      // 阿里云返回的图片地址
      let shu=client.signatureUrl(imgsrc, {
        response: {
          'content-disposition': 'attachment;'
        }
      });
      // downloadFile 小程序下载资源到本地在访问图片 也可以直接返回图片路径地址
      wx.downloadFile({
        url: shu,
        success (res) {
          // 只要服务器有响应数据,就会把响应内容写入文件并进入 success 回调,业务需要自行判断是否下载到了想要的内容
          if (res.statusCode === 200) {
            that.setData({
              backimg:  res.tempFilePath
            })
          }else{
            that.setData({
              backimg:  ''
            })
          }
        }
      })
    }
  },
})


/components/imgurl/imgurl.wxml

<view class="load" wx:if="{{!backimg}}">加载中</view>
<image class="image" wx:if="{{backimg}}" mode="aspectFill" src="{{backimg}}"></image>


/components/imgurl/imgurl.wxss

.load{
  width: 100%;
  height: 100%;
  font-size: 24rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #F5F7FA;
  color: #C0C4CC;
  vertical-align: middle;
}
.image{
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 6rpx;
}


调用 components json引入 imgurl 文件

{
  "usingComponents": {
    "imgurl": "/components/imgurl/imgurl"
  }
}


在wxml 中调用 topimg:oss存储 Bucket 路径 imgdata:后台返回 accessKeyId accessKeySecret 等参数

<imgurl topimg="{{itemrd.urlpic}}" class="timg" imgdata="{{credentia}}" ></imgurl>


最后一次编辑于  2021-02-07  
点赞 0
收藏
评论

1 个评论

  • 2021-02-15

    那个aliyun的 js 文件超过500k了, 提示编译错误。。

    2021-02-15
    赞同 1
    回复 2
    • 七月 木槿
      七月 木槿
      2021-11-22
      请问,你解决了这个问题了没
      2021-11-22
      回复
    • Melody
      Melody
      2021-12-19
      同样的烦恼,要如何解决呢
      2021-12-19
      回复
登录 后发表内容