uniapp上传图片（阿里云oss上传）

uniapp上传图片（阿里云oss上传）

上传图片采用的API是uni.uploadFile。需要后台给oss的配置信息

新建config目录，新建config.js，配置阿里云oss信息

var aliyunConfig = {
   uploadImageUrl: 'https://xxxxxxx.oss-cn-beijing.aliyuncs.com/', // 默认存在根目录，可根据需求改
   AccessKeySecret: 'xxxxxxxxxxxxx',        // AccessKeySecret 去你的阿里云上控制台上找
   OSSAccessKeyId: 'xxxxxxxxxxxxx',         // AccessKeyId 去你的阿里云上控制台上找
   timeout: 80000 //这个是上传文件时Policy的失效时间
}
export default {
	...aliyunConfig
}

1. 小程序，封装一个uploadFile.js

import Config from "@/config/config.js"

const env = {
	uploadImageUrl:Config.uploadImageUrl,
	AccessKeySecret:Config.AccessKeySecret, 
	OSSAccessKeyId:Config.OSSAccessKeyId,
	timeout:Config.timeout,
}


//Base64,hmac,sha1,crypto相关算法
const base64 = require('./aliyun/base64.js');
require('./aliyun/hmac.js');
require('./aliyun/sha1.js');
const Crypto = require('./aliyun/crypto.js');

/*
 *上传文件到阿里云oss
 *@param - filePath :图片的本地资源路径
 *@param - dir:表示要传到哪个目录下
 *@param - successc:成功回调
 *@param - failc:失败回调
 */ 
const uploadFile = function (filePath, dir, successc, failc) {
  if (!filePath || filePath.length ==0) {
    uni.showModal({
      title: '图片错误',
      content: '请重试',
      showCancel: false,
    })
    return;
  }
  
  console.log('上传图片.....');
  
  // 获取上传的文件类型
  let fileTypeIndex = filePath.lastIndexOf('.');
  let fileType = filePath.substring(fileTypeIndex);

  //图片名字 可以自行定义，     这里是采用当前的时间戳 + 150内的随机数来给图片命名的
  // const aliyunFileKey = dir + new Date().getTime() + Math.floor(Math.random() * 150) + '.png';
  const aliyunFileKey = dir + new Date().getTime() + Math.floor(Math.random() * 150) + fileType;
  
  const aliyunServerURL = env.uploadImageUrl;//OSS地址，需要https
  const accessid = env.OSSAccessKeyId;
  const policyBase64 = getPolicyBase64();
  const signature = getSignature(policyBase64);//获取签名
 
  uni.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) {
      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;
}

export default uploadFile;

2. h5部分只需要修改一些部分代码
   原因：因为uni.chooseImage返回的image地址是blob临时地址，比如"blob:http://localhost:8081/da3b811e-6acf-485a-853f-ee8560189bd3"
   所以，需要修改获取文件的类型。

//小程序
// 获取上传的文件类型
  let fileTypeIndex = filePath.lastIndexOf('.');
  let fileType = filePath.substring(fileTypeIndex);

//h5
// 获取上传的文件类型
  let fileTypeIndex = filePath.lastIndexOf('.');
  let fileType = filePath.substring(fileTypeIndex);

//增加一个将blob路径转blob对象，类似file对象
// 将选择的blob地址实例化为一个文件对象 就行input选择出的文件对象一样
function h5_url_to_blob(url) {
	return new Promise((resolve, reject) => {
		var xhr = new XMLHttpRequest();
		xhr.open('GET', url, true);
		xhr.responseType = 'blob';
		xhr.onload = function(e) {
			if (this.status == 200) {
				var Blob = this.response;
				// console.log(myBlob)
				resolve(Blob)
				// myBlob现在是对象URL指向的blob。 
			}
		};
		xhr.send();
	})
}

h5封装成ossUpload.js

import Config from "@/config/config.js"

const env = {
	uploadImageUrl: Config.uploadImageUrl,
	AccessKeySecret: Config.AccessKeySecret,
	OSSAccessKeyId: Config.OSSAccessKeyId,
	timeout: Config.timeout,
}


//Base64,hmac,sha1,crypto相关算法
const base64 = require('./aliyun/base64.js');
require('./aliyun/hmac.js');
require('./aliyun/sha1.js');
const Crypto = require('./aliyun/crypto.js');

/*
 *上传文件到阿里云oss
 *@param - filePath :图片的本地资源路径
 *@param - dir:表示要传到哪个目录下
 *@param - successc:成功回调
 *@param - failc:失败回调
 */
const uploadFile = async function(filePath,successc, failc) {
	if (!filePath || filePath.length ==0) {
	  uni.showModal({
	    title: '图片错误',
	    content: '请重试',
	    showCancel: false,
	  })
	  return;
	}

	let blobFile = await h5_url_to_blob(filePath)

	// 获取上传的文件类型
	// 获取上传的文件类型
	let fileType = blobFile.type.split('/')[1];

	//图片名字 可以自行定义，     这里是采用当前的时间戳 + 150内的随机数来给图片命名的
	// const aliyunFileKey = dir + new Date().getTime() + Math.floor(Math.random() * 150) + '.png';
	const aliyunFileKey = new Date().getTime() + Math.floor(Math.random() * 150) + '.'+fileType;

	const aliyunServerURL = env.uploadImageUrl; //OSS地址，需要https
	const accessid = env.OSSAccessKeyId;
	const policyBase64 = getPolicyBase64();
	const signature = getSignature(policyBase64); //获取签名

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


// 将选择的blob地址实例化为一个文件对象 就行input选择出的文件对象一样
function h5_url_to_blob(url) {
	return new Promise((resolve, reject) => {
		var xhr = new XMLHttpRequest();
		xhr.open('GET', url, true);
		xhr.responseType = 'blob';
		xhr.onload = function(e) {
			if (this.status == 200) {
				var Blob = this.response;
				// console.log(myBlob)
				resolve(Blob)
				// myBlob现在是对象URL指向的blob。 
			}
		};
		xhr.send();
	})
}
export default uploadFile;