微信小程序中图片上传阿里云Oss

本人今年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源码在这里,如果觉得这面文章对你有帮助的话，可给我点个star这里，谢谢！

最后，希望这篇文章对你有所帮助，真真确确是可以在微信小程序中上传图片到阿里云的。我也当做笔记记录一下。当然感谢原文对我的帮助，不然我这个小菜鸟怎么解决这个问题呢，哈哈！