阿里云 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>