本人今年 6 月份毕业, 最近刚在上海一家小公司实习, 做微信小程序开发. 最近工作遇到一个小问题.
微信小程序图片上传阿里云服务器 Oss 也折腾了蛮久才解决的, 所以特意去记录一下.
第一步: 配置阿里云地址:
我们公司是阿里云地址是会改变的, 所以需要动态的从后台获取配置
- var client = hprose.Client.create(App.globalym, ["get_oss_config"]);
- client.get_oss_config(******, *****).then(function (res) {
- var res = JSON.parse(res);// 从后台返回的 oss 账号数据
- if (res.code == 1) {// 判断是否得到
- env = {
- //aliyun OSS config
- uploadImageUrl: 'https://' + res.body.bucket + '.' + res.body.area + '.com', // 默认存在根目录, 可根据需求改
- AccessKeySecret: res.body.accesskey,
- OSSAccessKeyId: res.body.accessid,
- timeout: 87600 // 这个是上传文件时 Policy 的失效时间
- };
- }
- }, function (err) {
- console.log('请求 oss 配置失败');
- console.log(err);
- });
主要是这部分. 这是配置内容
- env = {
- //aliyun OSS config
- uploadImageUrl: 'https://' + res.body.bucket + '.' + res.body.area + '.com', // 默认存在根目录, 可根据需求改
- AccessKeySecret: res.body.accesskey,
- OSSAccessKeyId: res.body.accessid,
- timeout: 87600 // 这个是上传文件时 Policy 的失效时间
- };
第二步: 引用上传图片的模块
const uploadImage = require('../../utils/uploadAliyun.js');
uploadAliyun.JS 的内容
- const Base64 = require('./Base64.js');
- require('./hmac.js');
- require('./sha1.js');
- const Crypto = require('./crypto.js');
- var env = null
- const uploadFile = function (params) {
- env = params.envs
- if (!params.filePath) {
- wx.showModal({
- title: '图片错误',
- content: '请重试',
- showCancel: false,
- })
- return;
- }
- const aliyunFileKey = params.dir + params.filePath.replace('wxfile://', ''); // 在手机上检测 注意
- //const aliyunFileKey = params.dir + params.filePath.replace('http://', ''); // 在开发者工具里检测 注意
- 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.setHours(date.getHours() + env.timeout);
- let srcT = date.toISOString();
- const policyText = {
- "expiration": srcT, // 设置该 Policy 的失效时间
- "conditions": [
- ["content-length-range", 0, 5 * 1024 * 1024] // 设置上传文件的大小限制, 5mb
- ]
- };
- const policyBase64 = Base64.encode(JSON.stringify(policyText));
- return policyBase64;
- }
- const getSignature = function (policyBase64) {
- const accesskey = env.AccessKeySecret;
- // console.log(accesskey)
- const bytes = Crypto.HMAC(Crypto.SHA1, policyBase64, accesskey, {
- asBytes: true
- });
- const signature = Crypto.util.bytesToBase64(bytes);
- return signature;
- }
- module.exports = uploadFile;
注意如果想在开发者工具里检测上传结果, 请使用这段代码
const aliyunFileKey = params.dir + params.filePath.replace('http://', ''); // 在开发者工具里检测 注意
在手机上要使用这段代码, 不然要报错哦!
const aliyunFileKey = params.dir + params.filePath.replace('wxfile://', ''); // 在手机上检测 注意
第三步: 在需要上传图片的地方, 加上这段代码.
- uploadImage({
- filePath: res.tempFilePaths[0],
- dir: "images/",
- success: function (res) {
- console.log(res)
- },
- fail: function (res) {
- console.log("上传失败")
- console.log(res)
- },
- envs: env
- })
第四步:
Base64,JS,hmac.JS,sha1.JS,crypto.JS,uploadAliyun.JS 源码在这里 https://github.com/webXLing/uploadOss , 如果觉得这面文章对你有帮助的话, 可给我点个 star 这里 https://github.com/webXLing/uploadOss , 谢谢!
最后, 希望这篇文章对你有所帮助, 真真确确是可以在微信小程序中上传图片到阿里云的. 我也当做笔记记录一下. 当然感谢原文 https://www.jianshu.com/p/34d6dcbdc2e5 对我的帮助, 不然我这个小菜鸟怎么解决这个问题呢, 哈哈!
来源: http://www.bubuko.com/infodetail-3299625.html