纯手写,踩了半天多的坑干出来了。。。
网上也有对于阿里云如何在微信小程序里使用,但是很不全,包括阿里云文档的最佳实践里。
话不多说上代码了。
1 upvideo(){ 2 var aliOssParams = util.aliOssParams();//主要是获取上传阿里云的加密策略policy和签名signature;以及上传自己要上传到阿里云的地址,当然还有自己阿里云accessid。 3 //上传视频到阿里云 4 var that = this; 5 wx.chooseVideo({ 6 maxDuration: 10, 7 success: function (res) { 8 var tempFilePath = res.tempFilePath; 9 var stringFilePath = String(tempFilePath); 10 var indexType = stringFilePath.lastIndexOf(\'.\'); 11 var type = stringFilePath.substring(indexType); 12 var alikey = \'video/\'+new Date().getTime() + 13 Math.floor(Math.random() * 1000)+ type ;//随机1000内的数加上时间戳作为你存放在阿里云video目录下名字和类型。 14 wx.uploadFile({ 15 url:aliOssParams.host, 16 filePath: tempFilePath, 17 name: \'file\', 18 formData: { 19 name: tempFilePath, 20 key: alikey,//这个是关键它是定义存放在阿里云那个目录下 21 policy:aliOssParams.policy,//上传阿里云的加密策略 22 OSSAccessKeyId: aliOssParams.aid,//自己阿里云的aid 23 success_action_status: "200", 24 signature: aliOssParams.signature,//上传阿里云的签名 25 }, 26 success: function (res) { 27 var videoUrl = aliOssParams.host+\'/\'+alikey;//这就是 28 刚上传阿里云后的存放的地址链接,通过它打开你刚上传视频。 29 that.videoUrl = videoUrl; 30 console.log(\'that\',that,videoUrl); 31 wx.showToast({ 32 title: "上传成功", 33 icon: \'success\', 34 duration: 1000 35 }) 36 }, 37 fail: function ({ errMsg }) { 38 wx.showToast({ 39 title: "上传失败", 40 duration: 1000 41 }) 42 }, 43 }) 44 } 45 }) 46
通过代码大家可以看到最关键的是啥,如何获取加密策略和签名了,当然了,阿里云最佳实践里有demo,但是crypto这个库已经废弃了,它demo给你带过来的crypto,你只能自己去提取了。
这里是我提为大家提取的crypto函数,直接copy用。
/*! * Crypto-JS v1.1.0 * http://code.google.com/p/crypto-js/ * Copyright (c) 2009, Jeff Mott. All rights reserved. * http://code.google.com/p/crypto-js/wiki/License */ var base64map = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"; // Global Crypto object const Crypto = {}; // Crypto utilities Crypto.util = { // Bit-wise rotate left rotl: function (n, b) { return (n << b) | (n >>> (32 - b)); }, // Bit-wise rotate right rotr: function (n, b) { return (n << (32 - b)) | (n >>> b); }, // Swap big-endian to little-endian and vice versa endian: function (n) { // If number given, swap endian if (n.constructor == Number) { return util.rotl(n, 8) & 0x00FF00FF | util.rotl(n, 24) & 0xFF00FF00; } // Else, assume array and swap all items for (var i = 0; i < n.length; i++) n[i] = util.endian(n[i]); return n; }, // Generate an array of any length of random bytes randomBytes: function (n) { for (var bytes = []; n > 0; n--) bytes.push(Math.floor(Math.random() * 256)); return bytes; }, // Convert a string to a byte array stringToBytes: function (str) { var bytes = []; for (var i = 0; i < str.length; i++) bytes.push(str.charCodeAt(i)); return bytes; }, // Convert a byte array to a string bytesToString: function (bytes) { var str = []; for (var i = 0; i < bytes.length; i++) str.push(String.fromCharCode(bytes[i])); return str.join(""); }, // Convert a string to big-endian 32-bit words stringToWords: function (str) { var words = []; for (var c = 0, b = 0; c < str.length; c++, b += 8) words[b >>> 5] |= str.charCodeAt(c) << (24 - b % 32); return words; }, // Convert a byte array to big-endian 32-bits words bytesToWords: function (bytes) { var words = []; for (var i = 0, b = 0; i < bytes.length; i++, b += 8) words[b >>> 5] |= bytes[i] << (24 - b % 32); return words; }, // Convert big-endian 32-bit words to a byte array wordsToBytes: function (words) { var bytes = []; for (var b = 0; b < words.length * 32; b += 8) bytes.push((words[b >>> 5] >>> (24 - b % 32)) & 0xFF); return bytes; }, // Convert a byte array to a hex string bytesToHex: function (bytes) { var hex = []; for (var i = 0; i < bytes.length; i++) { hex.push((bytes[i] >>> 4).toString(16)); hex.push((bytes[i] & 0xF).toString(16)); } return hex.join(""); }, // Convert a hex string to a byte array hexToBytes: function (hex) { var bytes = []; for (var c = 0; c < hex.length; c += 2) bytes.push(parseInt(hex.substr(c, 2), 16)); return bytes; }, // Convert a byte array to a base-64 string bytesToBase64: function (bytes) { // Use browser-native function if it exists if (typeof btoa == "function") return btoa(util.bytesToString(bytes)); var base64 = [], overflow; for (var i = 0; i < bytes.length; i++) { switch (i % 3) { case 0: base64.push(base64map.charAt(bytes[i] >>> 2)); overflow = (bytes[i] & 0x3) << 4; break; case 1: base64.push(base64map.charAt(overflow | (bytes[i] >>> 4))); overflow = (bytes[i] & 0xF) << 2; break; case 2: base64.push(base64map.charAt(overflow | (bytes[i] >>> 6))); base64.push(base64map.charAt(bytes[i] & 0x3F)); overflow = -1; } } // Encode overflow bits, if there are any if (overflow != undefined && overflow != -1) base64.push(base64map.charAt(overflow)); // Add padding while (base64.length % 4 != 0) base64.push("="); return base64.join(""); }, // Convert a base-64 string to a byte array base64ToBytes: function (base64) { // Use browser-native function if it exists if (typeof atob == "function") return util.stringToBytes(atob(base64)); // Remove non-base-64 characters base64 = base64.replace(/[^A-Z0-9+\/]/ig, ""); var bytes = []; for (var i = 0; i < base64.length; i++) { switch (i % 4) { case 1: bytes.push((base64map.indexOf(base64.charAt(i - 1)) << 2) | (base64map.indexOf(base64.charAt(i)) >>> 4)); break; case 2: bytes.push(((base64map.indexOf(base64.charAt(i - 1)) & 0xF) << 4) | (base64map.indexOf(base64.charAt(i)) >>> 2)); break; case 3: bytes.push(((base64map.indexOf(base64.charAt(i - 1)) & 0x3) << 6) | (base64map.indexOf(base64.charAt(i)))); break; } } return bytes; }, HMAC : function (hasher, message, key, options) { // Allow arbitrary length keys key = key.length > 16 * 4 ? hasher(key, { asBytes: true }) : Crypto.util.stringToBytes(key); // XOR keys with pad constants var okey = key, ikey = key.slice(0); for (var i = 0; i < 16 * 4; i++) { okey[i] ^= 0x5C; ikey[i] ^= 0x36; } var hmacbytes = hasher(Crypto.util.bytesToString(okey) + hasher(Crypto.util.bytesToString(ikey) + message, { asString: true }), { asBytes: true }); return options && options.asBytes ? hmacbytes : options && options.asString ? Crypto.util.bytesToString(hmacbytes) : Crypto.util.bytesToHex(hmacbytes); }, sha11:function(k) { var u = Crypto.util.stringToWords(k), v = k.length * 8, o = [], q = 1732584193, p = -271733879, h = -1732584194, g = 271733878, f = -1009589776; u[v >> 5] |= 128 << (24 - v % 32); u[((v + 64 >>> 9) << 4) + 15] = v; for (var y = 0; y < u.length; y += 16) { var D = q, C = p, B = h, A = g, z = f; for (var x = 0; x < 80; x++) { if (x < 16) { o[x] = u[y + x] } else { var s = o[x - 3] ^ o[x - 8] ^ o[x - 14] ^ o[x - 16]; o[x] = (s << 1) | (s >>> 31) } var r = ((q << 5) | (q >>> 27)) + f + (o[x] >>> 0) + (x < 20 ? (p & h | ~p & g) + 1518500249 : x < 40 ? (p ^ h ^ g) + 1859775393 : x < 60 ? (p & h | p & g | h & g) - 1894007588 : (p ^ h ^ g) - 899497514); f = g; g = h; h = (p << 30) | (p >>> 2); p = q; q = r } q += D; p += C; h += B; g += A; f += z } return [q, p, h, g, f] }, SHA1 : function(e, c) { var d = Crypto.util.wordsToBytes(Crypto.util.sha11(e)); return c && c.asBytes ? d: c && c.asString ? Crypto.util.bytesToString(d) : Crypto.util.bytesToHex(d) } }; // Crypto mode namespace Crypto.mode = {}; export {Crypto}
有了上面的crypto工具函数了,就去看看具体如何生成签名与加密策略吧。。
import base64 from "base-64" import {Crypto} from "./crypto.js" const util = { aliOssParams(){ var aid = "xxxxxxx";//你自己的阿里云的accessid var aky="xxxxxxxxxx";//你自己的阿里云的accesskey var host = "https://xxxxxxxxx.aliyuncs.com";//你自己的阿里云域名 var policyText = { "expiration": "2022-01-01T12:00:00.000Z",//上传的文件失效日期自己定义 "conditions": [ ["content-length-range", 0, 10485760000]//上传的内容大小,自己定义 ] }; var policy = base64.encode(JSON.stringify(policyText));//生成的加密策略 var bytes = Crypto.util.HMAC(Crypto.util.SHA1, policy, aky, { asBytes: true }) ; var signature = Crypto.util.bytesToBase64(bytes);//生成的签名 return { policy: policy, signature:signature, aid:aid, host: host } } } export {util}
至于如何上传图片,大体如下,请保证以上都已经跑通了,base64记得你上面引到。。
多张图片的上传如此
upMyImg(){ var aliOssParams = util.aliOssParams(); var that = this; wx.chooseImage({ count: 9, //最多可以选择的图片总数 // sizeType: [\'compressed\'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: [\'album\', \'camera\'], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) { // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 var tempFilePaths = res.tempFilePaths; //启动上传等待中... wx.showToast({ title: \'正在上传...\', icon: \'loading\', mask: true, duration: 10000 }) var uploadImgCount = 0; var tempFilePath; var stringFilePath = \'\'; var alikey = \'\' ; var type=\'\'; for (var i = 0, h = tempFilePaths.length; i < h; i++) { // stringFilePath= String(tempFilePaths[i]); // type = stringFilePath.substring(stringFilePath.lastIndexOf(\'.\')); alikey = \'imagees/\'+new Date().getTime() + Math.floor(Math.random() * 150)+ \'.jpg\'; that.srcs.push(tempFilePaths[i]); that.setData({srcs: that.srcs}); wx.uploadFile({ url: aliOssParams.host, filePath: tempFilePaths[i],//上传图片的路径 name: \'file\', formData: { key: alikey, name: tempFilePaths[i], policy:aliOssParams.policy, OSSAccessKeyId: aliOssParams.aid, success_action_status: "200", signature: aliOssParams.signature, }, success: function (res) { uploadImgCount++; console.log(\'rrrs\',res,tempFilePaths[i]); // var data = JSON.parse(res.data); //服务器返回格式: { "Catalog": "testFolder", "FileName": "1.jpg", "Url": "https://test.com/1.jpg" } // console.log(\'rrr\',data); console.log(\'ddd222\',res,aliOssParams.host,alikey); // var productInfo = that.data.productInfo; // if (productInfo.bannerInfo == null) { // productInfo.bannerInfo = []; // } // productInfo.bannerInfo.push({ // "catalog": data.Catalog, // "fileName": data.FileName, // "url": data.Url // }); // that.setData({ // productInfo: productInfo // }); //如果是最后一张,则隐藏等待中 if (uploadImgCount == tempFilePaths.length) { // that.srcs.push(tempFilePaths[i]); console.log(that.srcs,3222); wx.hideToast(); wx.showToast({ title: "上传成功", icon: \'success\', duration: 1000 }) } }, fail: function (res) { wx.hideToast(); wx.showModal({ title: \'错误提示\', content: \'上传图片失败\', showCancel: false, success: function (res) { } }) } }); } } }) // 上传图片完 }
请发表评论