阿里云OSS-小程序文件直传（支持微信小程序、H5、PC端web使用）-Toy模板网

这篇具有很好参考价值的文章主要介绍了阿里云OSS-小程序文件直传（支持微信小程序、H5、PC端web使用）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

支持微信小程序、H5、PC端web使用，整套文件进行封装统一使用

开发背景：做类似发布朋友圈的功能需求，由于后端对发布功能只提供一个接口，文字、状态、文件上传统一一个接口上传，且对文件上传方面做的接口存在诸多问题（人已经整麻了），包括各种数据结构的转换迎合后端，为节省时间和甩锅，被迫从客户端直传阿里云服务器，绕开服务端进行文件上传等操作，中间base64处理、加密策略，计算签名等处理都在前端完成。

优点：减少服务器压力

缺点：客户端目前不能直接预览文件，还需进一步在客户端处理（还在研究中）

具体做法见官方文档：如何在微信小程序环境下将文件上传到OSS_对象存储-阿里云帮助中心

一.文件解释

微信小程序阿里云oss,阿里云,小程序,javascript,前端,微信小程序

二.配置文件代码

config.js

let fileHost = "https://xxxxxx.oss-cn-beijing.aliyuncs.com"; //阿里云OSS的文件根域名
let config = {
  //aliyun OSS config
  uploadImageUrl: `${fileHost}`, //默认存在根目录，可根据需求改
  AccessKeySecret: 'xxxxxxxx',  // 这里的配置找运维或者阿里云OSS的管理者要对应的账号和密钥就可以了
  OSSAccessKeyId: 'xxxxxxxx',  // 这里的配置找运维或者阿里云OSS的管理者要对应的账号和密钥就可以了
  timeout: 87600 //这个是上传文件时Policy的失效时间
};
module.exports = config

const Base64 = {

    // private property
    _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",

    // public method for encoding
    encode: function (input) {
        var output = "";
        var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
        var i = 0;

        input = Base64._utf8_encode(input);

        while (i < input.length) {

            chr1 = input.charCodeAt(i++);
            chr2 = input.charCodeAt(i++);
            chr3 = input.charCodeAt(i++);

            enc1 = chr1 >> 2;
            enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
            enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
            enc4 = chr3 & 63;

            if (isNaN(chr2)) {
                enc3 = enc4 = 64;
            } else if (isNaN(chr3)) {
                enc4 = 64;
            }

            output = output +
                this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) +
                this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);

        }

        return output;
    },

    // public method for decoding
    decode: function (input) {
        var output = "";
        var chr1, chr2, chr3;
        var enc1, enc2, enc3, enc4;
        var i = 0;

        input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");

        while (i < input.length) {

            enc1 = this._keyStr.indexOf(input.charAt(i++));
            enc2 = this._keyStr.indexOf(input.charAt(i++));
            enc3 = this._keyStr.indexOf(input.charAt(i++));
            enc4 = this._keyStr.indexOf(input.charAt(i++));

            chr1 = (enc1 << 2) | (enc2 >> 4);
            chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
            chr3 = ((enc3 & 3) << 6) | enc4;

            output = output + String.fromCharCode(chr1);

            if (enc3 != 64) {
                output = output + String.fromCharCode(chr2);
            }
            if (enc4 != 64) {
                output = output + String.fromCharCode(chr3);
            }

        }

        output = Base64._utf8_decode(output);

        return output;

    },

    // private method for UTF-8 encoding
    _utf8_encode: function (string) {
        string = string.replace(/\r\n/g, "\n");
        var utftext = "";

        for (var n = 0; n < string.length; n++) {

            var c = string.charCodeAt(n);

            if (c < 128) {
                utftext += String.fromCharCode(c);
            } else if ((c > 127) && (c < 2048)) {
                utftext += String.fromCharCode((c >> 6) | 192);
                utftext += String.fromCharCode((c & 63) | 128);
            } else {
                utftext += String.fromCharCode((c >> 12) | 224);
                utftext += String.fromCharCode(((c >> 6) & 63) | 128);
                utftext += String.fromCharCode((c & 63) | 128);
            }

        }

        return utftext;
    },

    // private method for UTF-8 decoding
    _utf8_decode: function (utftext) {
        var string = "";
        var i = 0;
        var c = c1 = c2 = 0;

        while (i < utftext.length) {

            c = utftext.charCodeAt(i);

            if (c < 128) {
                string += String.fromCharCode(c);
                i++;
            } else if ((c > 191) && (c < 224)) {
                c2 = utftext.charCodeAt(i + 1);
                string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
                i += 2;
            } else {
                c2 = utftext.charCodeAt(i + 1);
                c3 = utftext.charCodeAt(i + 2);
                string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
                i += 3;
            }

        }

        return string;
    }
}

module.exports = Base64;

crypto.js

const Crypto = {};

(function(){

var base64map = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";


// Crypto utilities
var util = 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;

	}

};

// Crypto mode namespace
Crypto.mode = {};

})();

module.exports = Crypto;

hmac.js

const Crypto = require('./crypto.js');

(function(){

// Shortcut
var util = Crypto.util;

Crypto.HMAC = function (hasher, message, key, options) {

	// Allow arbitrary length keys
	key = key && key.length > hasher._blocksize * 4 ?
	      hasher(key, { asBytes: true }) :
	      util.stringToBytes(key);

	// XOR keys with pad constants
	var okey = key,
	    ikey = key.slice(0);
	for (var i = 0; i < hasher._blocksize * 4; i++) {
		okey[i] ^= 0x5C;
		ikey[i] ^= 0x36;
	}

	var hmacbytes = hasher(util.bytesToString(okey) +
	                       hasher(util.bytesToString(ikey) + message, { asString: true }),
	                       { asBytes: true });
	return options && options.asBytes ? hmacbytes :
	       options && options.asString ? util.bytesToString(hmacbytes) :
	       util.bytesToHex(hmacbytes);

};

})();

module.exports = Crypto;

sha1.js

const Crypto = require('./crypto.js');

(function(){

// Shortcut
var util = Crypto.util;

// Public API
var SHA1 = Crypto.SHA1 = function (message, options) {
	var digestbytes = util.wordsToBytes(SHA1._sha1(message));
	return options && options.asBytes ? digestbytes :
	       options && options.asString ? util.bytesToString(digestbytes) :
	       util.bytesToHex(digestbytes);
};

// The core
SHA1._sha1 = function (message) {

	var m  = util.stringToWords(message),
	    l  = message.length * 8,
	    w  =  [],
	    H0 =  1732584193,
	    H1 = -271733879,
	    H2 = -1732584194,
	    H3 =  271733878,
	    H4 = -1009589776;

	// Padding
	m[l >> 5] |= 0x80 << (24 - l % 32);
	m[((l + 64 >>> 9) << 4) + 15] = l;

	for (var i = 0; i < m.length; i += 16) {

		var a = H0,
		    b = H1,
		    c = H2,
		    d = H3,
		    e = H4;

		for (var j = 0; j < 80; j++) {

			if (j < 16) w[j] = m[i + j];
			else {
				var n = w[j-3] ^ w[j-8] ^ w[j-14] ^ w[j-16];
				w[j] = (n << 1) | (n >>> 31);
			}

			var t = ((H0 << 5) | (H0 >>> 27)) + H4 + (w[j] >>> 0) + (
			         j < 20 ? (H1 & H2 | ~H1 & H3) + 1518500249 :
			         j < 40 ? (H1 ^ H2 ^ H3) + 1859775393 :
			         j < 60 ? (H1 & H2 | H1 & H3 | H2 & H3) - 1894007588 :
			                  (H1 ^ H2 ^ H3) - 899497514);

			H4 =  H3;
			H3 =  H2;
			H2 = (H1 << 30) | (H1 >>> 2);
			H1 =  H0;
			H0 =  t;

		}

		H0 += a;
		H1 += b;
		H2 += c;
		H3 += d;
		H4 += e;

	}

	return [H0, H1, H2, H3, H4];

};

// Package private blocksize
SHA1._blocksize = 16;

})();

module.exports = Crypto;

readme.md

# 上传文件到阿里云
## 说明
> 开发框架是uniapp，项目实战，打包到微信小程序及H5都是可以正常上传的。
## 配置说明
> 只需要在config.js中，添加相关的配置就可以使用了。
## 上传阿里云的文件目录地址
> 可按环境区分，也可以写死，根据自己项目需求配置。batchUploadAliyun.js中集成了单个文件上传及多个文件上传的方法封装。
## 上传文件的入参示例
> {"type": 1, "tempFilePath": "xxx.png", "":""},type是根据自己业务定义的文件类型。如不需要可删除该参数；
## 出参示例
> 由于上传阿里云OSS只返回成功或者失败状态，所以代码中，在成功后，手动拼接了完整的url返回出来。{"type":1, "tempFilePath": "xxx.png", "url":"手动拼接的完整url"}
## 疑问解答
> 如有疑问或不理解的地方，可私信我，共同探讨。

三.核心代码

1.h5、pc端代码

const uploadAliOss = require('./uploadAliyun.js');
let env = process.env.NODE_ENV;

const dirObj = { 1: env +  '/img/', 2: env + '/video/' };

// 批量上传文件到阿里云oss;
export function batchUploadAliyun(arr){
	return new Promise(async (resolve, reject) => {
		let result = [];
		for( let i=0; i<arr.length; i++){
			await uploadfileAliyun(arr[i]).then(res => {
				result.push(res);
			});
		}
		resolve(result);
	}).catch(err => { reject(err) });
}

// 上传单个文件到阿里云oss;
export function uploadfileAliyun(fileInfo){
	return new Promise((resolve, reject) => {
		const type = fileInfo['type'];
		let filePath = fileInfo['tempFilePath'];
		uploadAliOss({
		  filePath: filePath,
		  dir: dirObj[type],
		  success: function (res) {
			let result = {};
			Object.keys(fileInfo).forEach(it => {
				if(it !== 'path' && it !== 'tempFilePath'){
					result[it] = fileInfo[it];
				}
			});
			result['url'] = res;
			resolve(result);
		  },
		  fail: function (err) {
			reject(err);
		  }
		}) 
    }).catch(err => { reject(err) });
}

2.微信小程序

const env = require('./config.js');
const Base64 = require('./Base64.js');

require('./hmac.js');
require('./sha1.js');
const Crypto = require('./crypto.js');

const uploadFile = function (params) {
	if (!params.filePath) {
		uni.showModal({ title: '文件错误', content: '请重试', showCancel: false });
		uni.hideLoading();
		return false;
	}

	const aliyunFileKey = params.dir;
	const aliyunServerURL = env.uploadImageUrl;
	const accessid = env.OSSAccessKeyId;
	const policyBase64 = getPolicyBase64();
	const signature = getSignature(policyBase64);

	uni.uploadFile({
		url: aliyunServerURL, 
		filePath: params.filePath,
		name: 'file',
		formData: {
		  'key': aliyunFileKey,
		  'policy': policyBase64,
		  'OSSAccessKeyId': accessid,
		  'signature': signature,
		  'success_action_status': '200'
		},
		success: function (res) {
      console.log('成功回调',res);
		  if (res.statusCode != 200) {
			if(params.fail){
			  params.fail(res)
			}
			return;
		  }
		  if(params.success){
			let result = aliyunServerURL + '/' + aliyunFileKey;
			params.success(result);
		  }
		},
		fail: function (err) {
		  err.wxaddinfo = aliyunServerURL;
		  if (params.fail) {
			params.fail(err)
		  }
		}
	})
}

const getPolicyBase64 = function () {
  let date = new Date();
  date.setHours(date.getHours() + env.timeout);
  let srcT = date.toISOString();
  const policyText = {
    "expiration": srcT, //设置该Policy的失效时间
    "conditions": [
      ["content-length-range", 0, 30 * 1024 * 1024] // 设置上传文件的大小限制,30mb
    ]
  };

  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;

四.小程序实战运用

仿上述小程序代码，根据实际要求封装

注意：微信小程序配置域名白名单，需要在微信开发者配置（官网），以实现微信小程序和OSS Bucket之间的正常通信。

1.小程序上传至阿里云服务器必传参数

参数	是否必选	说明
host	是	填写Bucket的访问域名，例如https://examplebucket.oss-cn-zhangjiakou.aliyuncs.com。如果您的Bucket已绑定自定义域名，建议填写您的自定义域名。
signature	是	填写步骤3 中获取到的signature信息。
ossAccessKeyId	是	填写您的AccessKey ID。如果您是通过STS获取的临时用户，则填写临时用户的AccessKey ID。
policy	是	填写步骤3 中获取到的policy信息。
key	是	设置文件上传至OSS后的文件路径。例如，您需要将myphoto.jpg上传至test文件夹下，则填写test/myphoto.jpg。
securityToken	是	如果使用STS认证，则填写步骤3 中使用客户端签名获取到的SecurityToken。
filePath	是	填写待上传文件的本地完整路径，例如D:\example.txt。

2.效果图

微信小程序阿里云oss,阿里云,小程序,javascript,前端,微信小程序

2.代码块

微信小程序阿里云oss,阿里云,小程序,javascript,前端,微信小程序文章来源地址https://www.toymoban.com/news/detail-729090.html

<template>
  <view class="avatar" @click="changeAvatarSheet" :Url="imgUrl"> + </view>
</template>

<script>
import env from '../../utils/OssUpload/config.js'
import Base64 from '../../utils/OssUpload/Base64.js'
import Crypto from '../../utils/OssUpload/crypto.js'
require('../../utils/OssUpload/hmac.js')
require('../../utils/OssUpload/sha1.js')
export default {
  data() {
    return {
      arrImg: [],
      imgUrl: '',
      imgUrlObj: [],
    }
  },
  methods: {
    // About Change Avatar of users
    // 1.换头像的途径菜单 wx.showActionSheet,选择菜单
    // 调用wx.showActionSheet，作选择菜单
    changeAvatarSheet() {
      var that = this
      wx.showActionSheet({
        itemList: ['从相册中选择', '拍照'],
        itemColor: '',
        success: function (res) {
          console.log('res', res)
          if (!res.cancel) {
            if (res.tapIndex == 0) {
              // 调用函数
              that.chooseWxImageShop('album')
            } else if (res.tapIndex == 1) {
              //手机拍照
              //   console.log(res.tapIndex);
              // 调用函数
              that.chooseWxImageShop('camera')
            }
          }
        },
      })
    },

    // 2.wx.chooseImage
    // 3.上传头像到数据库 wx.uploadFile
    chooseWxImageShop: function (type) {
      // console.log('1111', uploadfileAliyun)
      wx.chooseMedia({
        count: 4,
        sizeType: ['original', 'compressed'],
        sourceType: [type],
        success: (res) => {
          console.log('params', res)
          const params = res.tempFiles[0].tempFilePath
          if (!params) {
            uni.showModal({
              title: '文件错误',
              content: '请重试',
              showCancel: false,
            })
            uni.hideLoading()
            return false
          }
          //获取年月日
          const date = new Date()
          const year = date.getFullYear()
          const month =
            date.getMonth() + 1 < 10
              ? '0' + (date.getMonth() + 1)
              : date.getMonth() + 1
          const day =
            date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
          const hour = date.getHours()
          const minute = date.getMinutes()
          const second = date.getSeconds()
          const hm = date.getMilliseconds()
          const time = year + month + day + hour + minute + second + hm
          //获取文件后缀名
          const fileExt = params.substring(params.lastIndexOf('.') + 1)

          const aliyunFileKey = 'qifu/back_app/dt_media/' + time + '.' + fileExt //拼接文件名
          const aliyunServerURL = env.uploadImageUrl
          const accessid = env.OSSAccessKeyId
          const policyBase64 = this.getPolicyBase64()
          const signature = this.getSignature(policyBase64)
          uni.uploadFile({
            url: aliyunServerURL,
            filePath: params,
            name: 'file',
            formData: {
              key: aliyunFileKey,
              policy: policyBase64,
              OSSAccessKeyId: accessid,
              signature: signature,
              success_action_status: '200',
            },
            success: function (res) {
              console.log('res-->', res)
              if (res.statusCode != 200) {
                if (params.fail) {
                  params.fail(res)
                }
                return
              }
              wx.showToast({
                title: '添加图片成功',
              })

              // if (params.success) {
              //   let result = aliyunServerURL + '/' + aliyunFileKey
              //   params.success('成功回调-拼接路径', result)
              // }
              //文件名做个保存，后端需要根据这个文件名来获取图片
              // console.log('sdkUrl',sdkUrl);
              // console.log('this.Url', this.Url)
            },
            fail: function (err) {
              console.log('err-->', err)
              err.wxaddinfo = aliyunServerURL
              if (params.fail) {
                params.fail(err)
              }
              wx.showToast({
                title: '添加图片失败',
              })
            },
          })
        //  const imgUrlObj= {
        //     id: 0,
        //     src: aliyunFileKey
        //   }
          this.arrImg.push(aliyunFileKey)
          //用map创建一个对象，然后把对象循环遍历放入数组中，且有唯一的id
          this.imgUrlObj = this.arrImg.map((item, index) => {
            return {
              id: index,
              src: aliyunFileKey,
            }
          })
          console.log('imgUrlObj', this.imgUrlObj);
          // this.arrImg.push(imgUrlObj)
          return this.$emit('changeUrl', this.imgUrlObj)
        },
      })
    },
    //上传到阿里云
    // 上传单个文件到阿里云oss;
    getPolicyBase64: function () {
      let date = new Date()
      date.setHours(date.getHours() + env.timeout)
      let srcT = date.toISOString()
      const policyText = {
        expiration: srcT, //设置该Policy的失效时间
        conditions: [
          ['content-length-range', 0, 30 * 1024 * 1024], // 设置上传文件的大小限制,30mb
        ],
      }
      const policyBase64 = Base64.encode(JSON.stringify(policyText))
      return policyBase64
    },

    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
    },
  },
}
</script>

<style lang="scss" scoped>
.avatar {
  width: 100rpx;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  // border-radius: 50%;
  overflow: hidden;
  border: 1px solid #625f5f;

  img {
    width: 100%;
    height: 100%;
  }
}
</style>

到了这里，关于阿里云OSS-小程序文件直传（支持微信小程序、H5、PC端web使用）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！