微信小程序上传文件到阿里云OSS的代码

阅读: 评论:0

微信小程序上传文件到阿里云OSS的代码

微信小程序上传文件到阿里云OSS的代码

Update3:配置文件。很多人不知道配置文件是啥样的,我把那个文件也发上来,按理说很好推测配置文件的内容。

config.js

 

var fileHost="xxxx.aliyuncs(你的阿里云oss地址)"
var config = {//aliyun OSS configuploadImageUrl: `${fileHost}`, //默认存在根目录,可根据需求改AccessKeySecret: '填你自己的AccessKeySecret',OSSAccessKeyId: '填你自己的 OSSAccessKeyId',timeout: 87600 //这个是上传文件时Policy的失效时间
};
ports = config

Base64,hmac,sha1,crypto相关算法点击这里。


Update2:代码重构。修改之前的代码,修改为微信小程序接口的使用方式。代码里面使用的各种算法出处,详见答案底部的原答案。

1.UploadAliyun.js

 

const env = require('../config.js');const Base64 = require('./Base64.js');require('./hmac.js');
require('./sha1.js');
const Crypto = require('./crypto.js');const uploadFile = function (params) {if (!params.filePath || params.filePath.length < 9) {wx.showModal({title: '图片错误',content: '请重试',showCancel: false,})return;}const aliyunFileKey = params.dir + place('wxfile://', '');const aliyunServerURL = env.uploadImageUrl;const accessid = env.OSSAccessKeyId;const policyBase64 = getPolicyBase64();const signature = getSignature(policyBase64);console.log('aliyunFileKey=', aliyunFileKey);console.log('aliyunServerURL', aliyunServerURL);wx.uploadFile({url: aliyunServerURL, filePath: params.filePath,name: 'file',formData: {'key': aliyunFileKey,'policy': policyBase64,'OSSAccessKeyId': accessid,'signature': signature,'success_action_status': '200',},success: function (res) {if (res.statusCode != 200) {if(params.fail){params.fail(res)}return;}if(params.success){params.success(aliyunFileKey);}},fail: function (err) {err.wxaddinfo = aliyunServerURL;if (params.fail) {params.fail(err)}},})
}const getPolicyBase64 = function () {let date = new Date();date.Hours() + env.timeout);let srcT = ISOString();const policyText = {"expiration": srcT, //设置该Policy的失效时间"conditions": [["content-length-range", 0, 5 * 1024 * 1024] // 设置上传文件的大小限制,5mb]};const policyBase64 = de(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;
}ports = uploadFile;

2.使用

 

const uploadImage = require('../../utils/uploadAliyun.js');

在需要使用的地方

 

uploadImage(
{filePath: filePath,dir: "images/",success: function (res) {console.log("上传成功")},fail: function (res) {console.log("上传失败")console.log(res)}
})

3.文档

参数类型必填说明
filePathString微信本地的文件名
dirString保存到阿里云oss的目录,可填""(空字符串)
successFunction上传成功的回调函数,返回值为保存的网络路径
failFunction上传失败的回调函数,返回值与官方uploadfile api文档一致

Update1:关于阿里云oss服务器地址设置的问题:

阿里云oss可以使用https访问,但是如果我们绑定了自己的域名,再通过自己的域名访问会出现证书错误。

解决办法:不使用我们自己绑定的域名,而是使用阿里云oss默认的域名。


以下为原答案

之前参照微信小程序上传阿里云视频文件流程及代码一文中的方法解决了文件上传到阿里云OSS的问题,自己也遇到一些小问题,后面解决了。

有朋友想要代码,我干脆写篇文章发布到这里吧!

1、主要代码uploadAliyun.js(我拿来上传图片的,理论上可以上传任何文件)

 

const env = require('../config.js'); //配置文件,在这里配置你的OSS keyId和KeySecret,timeout:87600;
//更好的做法是把这些信息放到服务器进行签名,防止信息泄露const Base64 = require('./Base64.js');//Base64,hmac,sha1,crypto相关算法
//参考这里.gitrequire('./hmac.js');
require('./sha1.js');
const Crypto = require('./crypto.js');const uploadFile = function (filePath, dir, successc, failc) {if (!filePath || filePath.length < 9) {wx.showModal({title: '图片错误',content: '请重试',showCancel: false,})return;}console.log('上传图片…');const aliyunFileKey = dir&#place('wxfile://', '');//我直接拿微信本地的名字当做传到服务器上的名字了,dir传的是images/,表示要传到这个目录下// const aliyunFileKey = fileW + '' + (new Date().getTime()) + '_' + objectId + '.mp4';//const aliyunFileKey = fileW const aliyunServerURL = env.uploadImageUrl;//OSS地址,需要httpsconst accessid = env.OSSAccessKeyId;//const policyBase64 = env.Policy;//const signature = env.Signature;const policyBase64 = getPolicyBase64();const signature = getSignature(policyBase64);//获取签名console.log('aliyunFileKey=', aliyunFileKey);console.log('aliyunServerURL',aliyunServerURL);wx.uploadFile({url: aliyunServerURL,filePath: filePath,name: 'file',//必须填fileformData: {'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;}console.log('上传图片成功', res)successc(aliyunFileKey);},fail: function (err) {err.wxaddinfo = aliyunServerURL;failc(err);},})
}const getPolicyBase64 = function () {let date = new Date();date.Hours() + env.timeout);let srcT = ISOString();const policyText = {"expiration": srcT, //设置该Policy的失效时间,超过这个失效时间之后,就没有办法通过这个policy上传文件了 "conditions": [["content-length-range", 0, 5*1024 * 1024] // 设置上传文件的大小限制,5mb]};const policyBase64 = de(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;
}ports = uploadFile;

2、使用

 

const uploadImage = require('../../utils/uploadAliyun.js');

在需要使用的地方

 

//filePath为要上传的本地文件的路径
//images/为oss目录
uploadImage(filePath, "images/",function (res) {console.log("上传成功")//todo 做任何你想做的事}, function (res) {console.log("上传失败")//todo 做任何你想做的事}

基本上就是这样,有不明白的直接发简信问我吧~


安利一波
我的书籍推荐网站:



 

本文发布于:2024-02-04 14:21:13,感谢您对本站的认可!

本文链接:https://www.4u4v.net/it/170709218756329.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:阿里   上传文件   代码   程序   微信小
留言与评论(共有 0 条评论)
   
验证码:

Copyright ©2019-2022 Comsenz Inc.Powered by ©

网站地图1 网站地图2 网站地图3 网站地图4 网站地图5 网站地图6 网站地图7 网站地图8 网站地图9 网站地图10 网站地图11 网站地图12 网站地图13 网站地图14 网站地图15 网站地图16 网站地图17 网站地图18 网站地图19 网站地图20 网站地图21 网站地图22/a> 网站地图23