- 小程序开发-图片上传到云存储
1、获取用户手机中的照片路径 使用[代码]wx.chooseImage[代码] 微信开发者文档中的介绍 https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html 下面是一个demo,其中success会返回本地图片的路径,此时已经可以用来做临时预览了,但是我们还要上传到云存储中,这样才算是更新图片成功。 [代码] wx.chooseImage({ count: 1, sizeType: ['compressed'], sourceType: ['album', 'camera'], success : (res)=>{ //console.log(res); const tempFilePaths = res.tempFilePaths[0]; this.setData({ userPhoto: tempFilePaths }); } }) [代码] 2、上传 使用[代码]wx.cloud.uploadFile[代码] 微信开发者文档介绍 上一步获得的地址存储在 userPhoto 中,将用户的openid设为改文件的路径。 ```Date.now()``为当前的时间戳,为文件添加唯一的标识 [代码]let cloudPath = "userPhoto/" + app.userInfo._openid + Date.now() + ".jpg"; wx.cloud.uploadFile({ cloudPath, filePath: this.data.userPhoto }) [代码] 3、将存储好的数据更新到用户的数据中,这样用户就可以使用云存储中的图片。 在成功调用完上一个函数之后,会返回一个fileID,存储着上传成功的文件的路径。 [代码]let cloudPath = "userPhoto/" + app.userInfo._openid + Date.now() + ".jpg"; wx.cloud.uploadFile({ cloudPath, filePath: this.data.userPhoto }).then((res)=>{ //console.log(res); let fileID = res.fileID; if(fileID){ db.collection('users').doc(app.userInfo._id).update({ data : { userPhoto : fileID } }) [代码] 使用[代码]db.collection('users').doc(app.userInfo._id).update[代码]将fileID更新到用户的数据列表中即可。 还要记得更新此时的全局变量,然后再渲染一遍用户的头像,这样就更新成功了。
2021-11-16 - 微信小程序调用oss上传至阿里云
1.首先创建oss密钥 这里我新建了一个名字 命名为config.js var fileHost = "https://*****************/"; //你的阿里云地址最后面跟上一个/ 在你当前小程序的后台的uploadFile 合法域名也要配上这个域名 var config = { //aliyun OSS config uploadImageUrl: `${fileHost}`, // 默认存在根目录,可根据需求改 AccessKeySecret: '*******', // AccessKeySecret 去你的阿里云上控制台上找 OSSAccessKeyId: '********', // AccessKeyId 去你的阿里云上控制台上找 timeout: 87600 //这个是上传文件时Policy的失效时间 }; module.exports = config 2.创建上传配置文件 我这里命名为upload.js const env = require('config.js'); //配置文件,在这文件里配置你的OSS keyId和KeySecret,timeout:87600; // 以下算法在https://gitee.com/chenkuo1997/oss-wx.git 复制到同upload.js目录下即可 const base64 = require('base64.js');//Base64,hmac,sha1,crypto相关算法 require('hmac.js'); require('sha1.js'); const Crypto = require('crypto.js'); /* *上传文件到阿里云oss *@param - filePath :图片的本地资源路径 *@param - dir:表示要传到哪个目录下 *@param - successc:成功回调 *@param - failc:失败回调 */ const uploadFile = function (filePath, dir, successc, failc) { if (!filePath || filePath.length < 9) { wx.showModal({ title: '图片错误', content: '请重试', showCancel: false, }) return; } console.log('上传图片.....'); //图片名字 可以自行定义, 这里是采用当前的时间戳 + 150内的随机数来给图片命名的 console.log(dir) const aliyunFileKey = dir+ new Date().getTime() + Math.floor(Math.random() * 150) + '.png'; const aliyunServerURL = env.uploadImageUrl;//OSS地址,需要https const accessid = env.OSSAccessKeyId; const policyBase64 = getPolicyBase64(); const signature = getSignature(policyBase64);//获取签名 console.log(env) wx.uploadFile({ url: aliyunServerURL,//开发者服务器 url filePath: filePath,//要上传文件资源的路径 name: 'file',//必须填file formData: { 'key': aliyunFileKey, 'policy': policyBase64, 'OSSAccessKeyId': accessid, 'signature': signature, 'success_action_status': '200', }, success: function (res) { console.log(res) if (res.statusCode != 200) { failc(new Error('上传错误:' + JSON.stringify(res))) return; } successc(aliyunServerURL+aliyunFileKey); }, fail: function (err) { err.wxaddinfo = aliyunServerURL; failc(err); }, }) } const getPolicyBase64 = function () { let date = new Date(); date.setHours(date.getHours() + env.timeout); let srcT = date.toISOString(); const policyText = { "expiration": srcT, //设置该Policy的失效时间,超过这个失效时间之后,就没有办法通过这个policy上传文件了 "conditions": [ ["content-length-range", 0, 5 * 1024 * 1024] // 设置上传文件的大小限制,5mb ] }; const policyBase64 = base64.encode(JSON.stringify(policyText)); return policyBase64; } const getSignature = function (policyBase64) { const accesskey = env.AccessKeySecret; const bytes = Crypto.HMAC(Crypto.SHA1, policyBase64, accesskey, { asBytes: true }); const signature = Crypto.util.bytesToBase64(bytes); return signature; } module.exports = uploadFile; 3.小程序页面调用的时候 const uploadImage = require('../../utils/upload'); /** * 上传图片 */ uploadImage() { let that = this; let applyRefundImgList = that.data.applyRefundImgList wx.chooseImage({ count: 5 - applyRefundImgList.length, //处理图片上传数量 (可根据自身需求配置) success: function(res) { wx.showLoading({ title: '上传中', mask: true }) for (let index = 0; index < res.tempFilePaths.length; index++) { //applyrefund 则为bucket下的文件夹路径 可根据自身需求进行分类 uploadImage(res.tempFilePaths[index], `applyrefund/${shopUuid}/`, function(res) { wx.hideLoading() applyRefundImgList.push(res) that.setData({ applyRefundImgList }) }, function(res) { wx.hideLoading() } ) } } }) },
2021-07-06