<1>前期准备
开通阿里云OSS服务,对象存储中创建Bucket(公司已开通直接使用)
*示例已开通阿里云且创建Bucket

<2>上传方式
小程序直传
:小程序前端直接调用上传微信上传接口进行图片/文件上传。
通过后台服务上传
:把上传文件请求接口传给后端,通过后端处理传给阿里云OSS。
<3>小程序直传方法
1、向服务端获取请求相关参数(policy、accessid、signature等)
//小程序上传最重要是计算signature和policy,这个建议通过服务端进行相关签名计算后返回给小程序,重点在服务端如何处理。
function getOssSignHttp(tempFilePaths) {
var that = this;
wx.request({
url: app.globalData.url + "XXXXX服务端接口名XXXX",
data: '',
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: function (json) {
//获取上传oss所需参数
//上传图片请求
uploadFileOssHttp.call(that, json.data, tempFilePaths);
},
fail: function (err) {
console.log(err)
}
})
}
2、调用微信上传文件API -> wx.uploadFile
function uploadFileOssHttp(data, tempFilePaths) {
var date = jointString();
let formData = {
'name': tempFilePaths, //文件路径
'key': 'APP-xxx/' + date + '.png',//文件名称
'policy': data.policy,//服务端返回
'OSSAccessKeyId': data.accessid,//服务端返回
'signature': data.signature,//服务端返回
'success_action_status': '200'
}
console.log(formData);
wx.uploadFile({
url: data.host,//图片存储地址
filePath: tempFilePaths,//图片路径
name: 'file',//上传类型
formData: formData,//上传参数
success: function (json) {
console.log('图片上传成功');
},
fail: function (err) {
console.log('图片上传失败');
}
})
}
3、文件名称传给服务端
根据项目情况而定是否把文件名称传给服务端,一般情况需要给服务端做一个记录
到这里,小程序上传阿里云OSS的流程全部完成,服务端处理签名及返回参数,上传API中对应的参数没有写错,上传就是一件so easy的事情啦!
网友评论