uni-app之阿里云对象存储OSS(服务端签名后直传)

uni-app之阿里云对象存储OSS(服务端签名后直传)

阿里云相关参数详解
阿里云服务端签名后直传

服务端签名后直传的原理如下：

1. 用户发送上传Policy请求到应用服务器。
2. 应用服务器返回上传Policy和签名给用户。
3. 用户直接上传数据到OSS。

请求参数如下：

{
  'key' : '',
  'policy': '',
  'OSSAccessKeyId': '',
  'success_action_status' : '200', //让服务端返回200,不然，默认会返回204
  'signature': '',
}

无须上传回调callback

1、uni-app通过uni.uploadFile封装请求：

小程序使用wx.uploadFile

/*
 *上传文件到阿里云oss
 *@param - config: 配置参数 {accessKeyId:'临时AccessKeyID', dir:'存储路径', host: 'OSS地址', policy: '加密策略', signature:'签名'}
 *@param - filePath: 文件路径
 *@param - fileName: 文件名称
 *@param - successc: 成功回调
 *@param - failc: 失败回调
 */ 
const uploadFile = function (config, filePath, fileName, successc, failc) {
  // OSS地址
  const aliyunServerURL = config.host
  // 存储路径(后台固定位置+随即数+文件格式)
  const aliyunFileKey = config.dir + new Date().getTime() + Math.floor(Math.random() * 100) + fileName
  // 临时AccessKeyID0
  const OSSAccessKeyId = config.accessKeyId
  // 加密策略
  const policy = config.policy
  // 签名
  const signature = config.signature
  uni.uploadFile({
    url: aliyunServerURL,
    filePath: filePath,//要上传文件资源的路径
    name: 'file',//必须填file
    formData: {
      'key': aliyunFileKey,
      'policy': policy,
      'OSSAccessKeyId': OSSAccessKeyId,
      '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) {
      failc(err);
    },
  })
}
module.exports = {
	uploadFile: uploadFile
}

2、通过FormData()直接使用post请求

这里使用的axios，可自行修改

/*
 *上传文件到阿里云oss
 *@param - config: 配置参数 {accessKeyId:'临时AccessKeyID', dir:'存储路径', host: 'OSS地址', policy: '加密策略', signature:'签名'}
 *@param - filePath: 文件路径
 *@param - fileName: 文件名称
 *@param - successc: 成功回调
 *@param - failc: 失败回调
 */ 
const uploadFile = function (config, filePath, fileName, successc, failc) {
	const formData = new FormData()
	formData.append('key', config.aliyunFileKey) // 临时AccessKeyID
	formData.append('policy', config.policy) // 加密策略
	formData.append('OSSAccessKeyId', config.OSSAccessKeyId) // 临时AccessKeyID
	formData.append('signature', config.signature) // 签名
	formData.append('success_action_status', '200')
	formData.append('file', filePath) // 文件路径
	formData.append('name', fileName) // 文件名称
	formData.append('x-oss-object-acl', 'public-read') // 只读访问权限
	axios({
		method: 'post',
		url: config.host,
		data: formData
	}).then(() => {
		successc(config.aliyunServerURL+ '/' +config.aliyunFileKey);
	}).catch(() => {
		failc('上传失败')
	})
}
module.exports = {
	uploadFile: uploadFile
}

使用方法

1、通过后台接口获取相关数据

const config = {
	accessKeyId: 'LTAI2cJHSqKU6rR7',				
	policy: 'eyJleHBpcmF0aW9uIjoiMjAxOS0xMi0yN1QwNjo0NDowMy44MzhaIiwiY29uZGl0aW9ucyI6W1siY29udGVudC1sZW5ndGgtcmFuZ2UiLDAsMzE0NTcyODBdLFsic3RhcnRzLXdpdGgiLCIka2V5IiwiYmVlL2ltYWdlcy8yMDE5MTIyNyJdXX0=',
	signature: 'Ga/qf0X/kjJnJ1K5c4Wc83/Airo=',
	dir: 'bee/images/20191227',
	host: 'http://bee-pulice.oss-cn-hangzhou.aliyuncs.com',
	callback: 'eyJjYWxsYmFja0JvZHlUeXBlIjoiYXBwbGljYXRpb24veC13d3ctZm9ybS11cmxlbmNvZGVkIiwiY2FsbGJhY2tVcmwiOiJodHRwOi8vaHV0dS51dG9vbHMuY2x1Yi9vc3MvY2FsbGJhY2siLCJjYWxsYmFja0JvZHkiOiJmaWxlbmFtZT0ke29iamVjdH0mc2l6ZT0ke3NpemV9Jm1pbWVUeXBlPSR7bWltZVR5cGV9JmhlaWdodD0ke2ltYWdlSW5mby5oZWlnaHR9JndpZHRoPSR7aW1hZ2VJbmZvLndpZHRofSJ9'
}

2、这里使用vantUI组件库选择文件

<template>
	<div class="upload-container">
		<uploader :after-read="afterRead" :max-count="1" v-model="fileList"></uploader>
	</div>
</template>

<script>
	import { Toast, Uploader } from 'vant'
	export default {
		components: { Uploader },
		data () {
		    return {
		      	fileList: []
		    }
	  	},
	  	methods: {
	  		afterRead (data) {
	  			// config后台接口获取
		      	uploadFile(config, data.file, data.file.name, res=>{
		      		Toast('上传成功')
		      	}, error=>{
		      		Toast('上传失败')
		      		this.fileList = []
		      	})
		    }
		}
	}
</script>