微信小程序里如何用阿里云上传视频,图片。。

纯手写,踩了半天多的坑干出来了。。。

网上也有对于阿里云如何在微信小程序里使用,但是很不全,包括阿里云文档的最佳实践里。

话不多说上代码了。

 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) { }
                       })
                     }
                   });
                 }
               }
             })


          // 上传图片完
          }

  

posted @ 2018-10-28 18:39  不拆贱人  阅读(...)  评论(... 编辑 收藏