小程序前端直传阿里云oss
发布时间：2021-06-21 09:32 所属栏目：小程序开发教程
一、上传会用到的一些东西：
1.wx.chooseImage；
2.wx.uploadFile；
3.获取上传需要的签名（signature）和加密策略（policy）和上传url(host)的接口；
二、步骤拆解：
1.通过接口获取签名等信息；
2.选择图片得到filePath；
3.上传图片得到oss图片路径并渲染；
三、代码实现：
ossPolicy:{
OSSAccessKeyId: "LTAIEGwazoZUp6GV",
accessid: "LTAIEGwazoZUp6GV",
dir: "",
expire: 1559634215,
host: "http://dhb-business-card.oss-cn-aabbccdd.aliyuncs.com",
policy: "eyJleHBpcmF0aW9uIjoiMjAxOS0wNi0wNFQxNTo0MzozNVoiLCJjb25kaXRpb25zIjpbWyJjb250ZW50LWxlbmd0aC1yYW5nZSIsMCwyMDk3MTUyMDBdLFsic3RhcnRzLXdpdGgiLCIka2V5Ii23Il1dfQ==",
signature: "2n+ATkFZm23BWrXcfi7hHH9/c+Y="
}
|
2.选择图片：
//选择图片
publishGallery() {
var imageArray = [];// 多图临时路径数组
wx.chooseImage({
count: 9, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
let filePath = res.tempFilePaths;
this.uploadImg(filePath)
}
})
},
|
3.上传图片
// 上传图片
uploadImg(filePath){
let _this = this;
_this.setData({
uploadPercent: true
})
let {
host,
OSSAccessKeyId,
policy,
signature
} = this.ossPolicy;
let imgList = [];
filePath.map((item) => {
wx.uploadFile({
url: host,
filePath: item,
name: 'file',
formData: {
name: item,
key: 'bbs/${filename}',
success_action_status: '200',
OSSAccessKeyId,
policy,
signature
},
success: res => {
if (res.statusCode === 200) {
_this.setData({
uploadPercent: false
});
const fileName = item.split('http://tmp/')[1];
imgList.push(`${host}/bbs/${fileName}`);
_this.setData({
img_l: imgList
});
}
},
fail: res => {
console.log(res)
}
})
});
},
|
注意事项：
1.上传中拼装的formData中的key为与后端约定的文件名，一般需要进行时间戳加密或者md5加密；
2.后面渲染图片时，imgList的拼装名一定要合key值对应，不然会出现问题；
3.如若需要对图片大小之类的进行一些限制，在chooseImage的success回调里对res.tempFiles进行相关处理；
