uniapp 图片上传到OSS 阿里云对象存储

需求：

将拍摄的图片或者从相册中选取的图片直接上传存储到 OSS ，不传服务器

参考：

阿里云官方文档

1）注册阿里云账号，开通OSS对象存储，创建阿里云oss许可证

2）按照官方文档步骤，前端后端协作（其中，签名这里可以前端做也可以后端做）

具体步骤：

项目中选择客户端签名（即前端做签名），具体的实施步骤为：

步骤1：配置Bucket跨域访问

步骤2：微信小程序配置域名白名单

步骤3：获取签名

    后端搭建STS服务，向前端提供以下数据

        OSSAccessKeyId  及  x-oss-security-token

    前端获取STS临时访问凭证并生成签名

• 获取签名文件（getSignature.js）

	// 注意：crypto-js，js-base64 需要通过 npm install 进行安装
    import crypto from 'crypto-js';
	import { Base64 } from 'js-base64';
	import http from "@/utils/request.js"; //引入luch-request封装的请求拦截，响应拦截
	/**
	 * 1.  获取阿里云签名信息
	 */
	function getAliOssInfo() {
		return http.post('api/ali/getAliSTS') //接口由后台提供
	}
	
	// 计算签名。
	function computeSignature(accessKeySecret, canonicalString) {
	  return crypto.enc.Base64.stringify(crypto.HmacSHA1(canonicalString, accessKeySecret));
	}
	
	const date = new Date();
	date.setHours(date.getHours() + 1);
	console.log('时间',date.toISOString())
	const policyText = {
	  expiration: date.toISOString(), // 设置policy过期时间。
	  conditions: [
	    // 限制上传大小。
	    ["content-length-range", 0, 1024 * 1024 * 1024],
	  ],
	};
	
	export const getFormDataParams=async()=>{
		console.log('开始签名')
	  const  {data:res}= await getAliOssInfo()
	  console.log(res)
	  if(res.code===0){
		let credentials=res.data 
		const policy = Base64.encode(JSON.stringify(policyText)) // policy必须为base64的string。
		const signature = computeSignature(credentials.AccessKeySecret, policy)
	  
	    console.log('credentials',credentials)
		const formData = {
			// OSSAccessKeyId: credentials.AccessKeyId,
			OSSAccessKeyId: credentials.AccessKeyId,
			signature,
			policy,
			'x-oss-security-token': credentials.SecurityToken 
		}
		console.log('签名',formData)
		return formData
	  }else{
		console.log(res.msg)
	  }
	 
	 
	}

• 上传图片至OSS（oss.js）

        利用uni.upload上传文件，封装为单独js

	
	import {getFormDataParams} from '@/utils/oss/getSignature.js'
	
	/**
	 * 2. 图片上传到oss
	 */
	export const uploadOss=async({
		filePathFore,filePath
	})=>{
		return new Promise( async (resolve) => {
		console.log('开始oss')
		 const res = await getFormDataParams() //请求后台获取oss签名信息
		
		 console.log('oss',res)
	
		//获取文件扩展名，根据后台返回的值而取
		let fileType = filePath.substring(filePath.lastIndexOf('.')) || '.jpg' //获取图片类型后缀 .jpg .png
		// 获取时间格式
		const time=uni.$u.timeFormat(new Date().getTime(), 'yyyymmddhhMMss')
		// const userId=uni.getStorageSync('userInfo').stu_id

		let key = `${filePathFore}${time}${fileType}` //那么我们上传到oss上，路径就是 filePathFore/20211112.png ,filePathFore 由后端接口中获取
		console.log('key',key)
		const host ='https://sxoss.lookdeep.cn/'
		uni.uploadFile({
			url: host,
			filePath: filePath,
			name: 'file', // 必须填file。
			formData: {
			    key,//文件名
			    policy:res.policy,//后台获取超时时间
			    OSSAccessKeyId: res.OSSAccessKeyId,//后台获取临时ID
			    signature:res.signature,//后台获取签名
			    'x-oss-security-token': res['x-oss-security-token'] ,// 使用STS签名时必传。
				success_action_status: '200', //让服务端返回200,不然，默认会返回204
			},
			success: (res) => {
				console.log('结果',res)
			    if (res.statusCode === 200) {
			    console.log('上传成功');
				  
				resolve(key) //上传成功后，将我们所自定义的key（文件路径名）返回出去
			    }
			},
			fail: err => {
			    console.log(err);
			}
		})

		// }
		})
			
		
		
	}

步骤4：使用

// 导入封装好的 上传oss 函数
import { uploadOss } from '@/utils/oss/oss_1.js'


// 使用：从相册选取照片上传到 OSS
 uni.chooseImage({
            count: 1,
            sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album'], //从相册选择
            success: async (res) => {
              
              // OSS上传(得到在oss文件夹下照片路径)
              this.ossPath = await uploadOss({
                filePathFore: this.foldPath,
                filePath: res.tempFilePaths[0],
              })

}）