摘要:微信小程序图片上传阿里云服务器也折腾了蛮久才解决的,所以特意去记录一下。上传失败第四步源码在这里如果觉得这面文章对你有帮助的话,可给我点个这里,谢谢最后,希望这篇文章对你有所帮助,真真确确是可以在微信小程序中上传图片到阿里云的。
本人今年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这里,谢谢!
最后,希望这篇文章对你有所帮助,真真确确是可以在微信小程序中上传图片到阿里云的。我也当做笔记记录一下。当然感谢原文对我的帮助,不然我这个小菜鸟怎么解决这个问题呢,哈哈!
扫一扫 往期文章数据结构与算法-LeetCode 格雷编码(No.89)
数据结构与算法-LeetCode 种花问题(No.605)
LeetCode-电话号码的字母组合(No.17) 递归+hash
JavaScript 数据结构与算法 这题你会吗?
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/113421.html
摘要:微信小程序图片上传阿里云服务器也折腾了蛮久才解决的,所以特意去记录一下。上传失败第四步源码在这里如果觉得这面文章对你有帮助的话,可给我点个这里,谢谢最后,希望这篇文章对你有所帮助,真真确确是可以在微信小程序中上传图片到阿里云的。 本人今年6月份毕业,最近刚在上海一家小公司实习,做微信小程序开发。最近工作遇到一个小问题。 微信小程序图片上传阿里云服务器Oss也折腾了蛮久才解决的,所以特意...
摘要:微信小程序图片上传阿里云服务器也折腾了蛮久才解决的,所以特意去记录一下。上传失败第四步源码在这里如果觉得这面文章对你有帮助的话,可给我点个这里,谢谢最后,希望这篇文章对你有所帮助,真真确确是可以在微信小程序中上传图片到阿里云的。 本人今年6月份毕业,最近刚在上海一家小公司实习,做微信小程序开发。最近工作遇到一个小问题。 微信小程序图片上传阿里云服务器Oss也折腾了蛮久才解决的,所以特意...
摘要:本文以开发一个类似语音口令红包小程序为例,向您讲解如何使用阿里云函数计算快速构建微信小程序的服务端。 前言 这篇文章适合所有的想微信小程序开发新手、老鸟以及想准备学习开发微信小程序的程序猿。本文以开发一个类似语音口令红包小程序为例,向您讲解如何使用阿里云函数计算快速构建微信小程序的服务端。通过本文,您将会了解以下内容: demo概览 传统服务器架构 VS Serverless架构 S...
摘要:本文以开发一个类似语音口令红包小程序为例,向您讲解如何使用阿里云函数计算快速构建微信小程序的服务端。 前言 这篇文章适合所有的想微信小程序开发新手、老鸟以及想准备学习开发微信小程序的程序猿。本文以开发一个类似语音口令红包小程序为例,向您讲解如何使用阿里云函数计算快速构建微信小程序的服务端。通过本文,您将会了解以下内容: demo概览 传统服务器架构 VS Serverless架构 S...
阅读 4046·2021-09-22 16:03
阅读 5414·2021-09-22 15:40
阅读 1241·2021-09-06 15:02
阅读 906·2019-08-30 15:53
阅读 2285·2019-08-29 15:35
阅读 1144·2019-08-23 18:22
阅读 3379·2019-08-23 16:06
阅读 682·2019-08-23 12:27