阿里云相关参数详解
阿里云服务端签名后直传
{
'key' : '',
'policy': '',
'OSSAccessKeyId': '',
'success_action_status' : '200', //让服务端返回200,不然,默认会返回204
'signature': '',
}
无须上传回调callback
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
}
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、这里使用vant
UI组件库选择文件