资讯专栏INFORMATION COLUMN

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

Yang_River / 2284人阅读

摘要:微信小程序图片上传阿里云服务器也折腾了蛮久才解决的,所以特意去记录一下。上传失败第四步源码在这里如果觉得这面文章对你有帮助的话,可给我点个这里,谢谢最后,希望这篇文章对你有所帮助,真真确确是可以在微信小程序中上传图片到阿里云的。

本人今年6月份毕业,最近刚在上海一家小公司实习,做微信小程序开发。最近工作遇到一个小问题。

微信小程序图片上传阿里云服务器Oss也折腾了蛮久才解决的,所以特意去记录一下。

第一步:配置阿里云地址:

我们公司是阿里云地址是会改变的,所以需要动态的从后台获取配置

</>复制代码

  1. var client = hprose.Client.create(app.globalym, ["get_oss_config"]);
  2. client.get_oss_config(******, *****).then(function (res) {
  3. var res = JSON.parse(res);//从后台返回的oss账号数据
  4. if (res.code == 1) {//判断是否得到
  5. env = {
  6. //aliyun OSS config
  7. uploadImageUrl: "https://" + res.body.bucket + "." + res.body.area + ".com", //默认存在根目录,可根据需求改
  8. AccessKeySecret: res.body.accesskey,
  9. OSSAccessKeyId: res.body.accessid,
  10. timeout: 87600 //这个是上传文件时Policy的失效时间
  11. };
  12. }
  13. }, function (err) {
  14. console.log("请求oss配置失败");
  15. console.log(err);
  16. });

主要是这部分。这是配置内容

</>复制代码

  1. env = {
  2. //aliyun OSS config
  3. uploadImageUrl: "https://" + res.body.bucket + "." + res.body.area + ".com", //默认存在根目录,可根据需求改
  4. AccessKeySecret: res.body.accesskey,
  5. OSSAccessKeyId: res.body.accessid,
  6. timeout: 87600 //这个是上传文件时Policy的失效时间
  7. };
第二步:引用上传图片的模块

</>复制代码

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

uploadAliyun.js的内容

</>复制代码

  1. const Base64 = require("./Base64.js");
  2. require("./hmac.js");
  3. require("./sha1.js");
  4. const Crypto = require("./crypto.js");
  5. var env = null
  6. const uploadFile = function (params) {
  7. env = params.envs
  8. if (!params.filePath) {
  9. wx.showModal({
  10. title: "图片错误",
  11. content: "请重试",
  12. showCancel: false,
  13. })
  14. return;
  15. }
  16. const aliyunFileKey = params.dir + params.filePath.replace("wxfile://", ""); //在手机上检测 注意
  17. //const aliyunFileKey = params.dir + params.filePath.replace("http://", ""); //在开发者工具里检测 注意
  18. const aliyunServerURL = env.uploadImageUrl;
  19. const accessid = env.OSSAccessKeyId;
  20. const policyBase64 = getPolicyBase64();
  21. const signature = getSignature(policyBase64);
  22. // console.log("aliyunFileKey=", aliyunFileKey);
  23. // console.log("aliyunServerURL", aliyunServerURL);
  24. wx.uploadFile({
  25. url: aliyunServerURL,
  26. filePath: params.filePath,
  27. name: "file",
  28. formData: {
  29. "key": aliyunFileKey,
  30. "policy": policyBase64,
  31. "OSSAccessKeyId": accessid,
  32. "signature": signature,
  33. "success_action_status": "200",
  34. },
  35. success: function (res) {
  36. if (res.statusCode != 200) {
  37. if(params.fail){
  38. params.fail(res)
  39. }
  40. return;
  41. }
  42. if(params.success){
  43. params.success(aliyunFileKey);
  44. }
  45. },
  46. fail: function (err) {
  47. err.wxaddinfo = aliyunServerURL;
  48. if (params.fail) {
  49. params.fail(err)
  50. }
  51. },
  52. })
  53. }
  54. const getPolicyBase64 = function () {
  55. let date = new Date();
  56. date.setHours(date.getHours() + env.timeout);
  57. let srcT = date.toISOString();
  58. const policyText = {
  59. "expiration": srcT, //设置该Policy的失效时间
  60. "conditions": [
  61. ["content-length-range", 0, 5 * 1024 * 1024] // 设置上传文件的大小限制,5mb
  62. ]
  63. };
  64. const policyBase64 = Base64.encode(JSON.stringify(policyText));
  65. return policyBase64;
  66. }
  67. const getSignature = function (policyBase64) {
  68. const accesskey = env.AccessKeySecret;
  69. // console.log(accesskey)
  70. const bytes = Crypto.HMAC(Crypto.SHA1, policyBase64, accesskey, {
  71. asBytes: true
  72. });
  73. const signature = Crypto.util.bytesToBase64(bytes);
  74. return signature;
  75. }
  76. module.exports = uploadFile;

注意如果想在开发者工具里检测上传结果,请使用这段代码

</>复制代码

  1. const aliyunFileKey = params.dir + params.filePath.replace("http://", ""); //在开发者工具里检测 注意

在手机上要使用这段代码,不然要报错哦!

</>复制代码

  1. const aliyunFileKey = params.dir + params.filePath.replace("wxfile://", ""); //在手机上检测 注意
第三步:在需要上传图片的地方,加上这段代码。

</>复制代码

  1. uploadImage({
  2. filePath: res.tempFilePaths[0],
  3. dir: "images/",
  4. success: function (res) {
  5. console.log(res)
  6. },
  7. fail: function (res) {
  8. console.log("上传失败")
  9. console.log(res)
  10. },
  11. envs: env
  12. })
第四步:

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

相关文章

  • 信小程序图片上传阿里Oss

    摘要:微信小程序图片上传阿里云服务器也折腾了蛮久才解决的,所以特意去记录一下。上传失败第四步源码在这里如果觉得这面文章对你有帮助的话,可给我点个这里,谢谢最后,希望这篇文章对你有所帮助,真真确确是可以在微信小程序中上传图片到阿里云的。 本人今年6月份毕业,最近刚在上海一家小公司实习,做微信小程序开发。最近工作遇到一个小问题。 微信小程序图片上传阿里云服务器Oss也折腾了蛮久才解决的,所以特意...

    netmou 评论0 收藏0
  • 信小程序图片上传阿里Oss

    摘要:微信小程序图片上传阿里云服务器也折腾了蛮久才解决的,所以特意去记录一下。上传失败第四步源码在这里如果觉得这面文章对你有帮助的话,可给我点个这里,谢谢最后,希望这篇文章对你有所帮助,真真确确是可以在微信小程序中上传图片到阿里云的。 本人今年6月份毕业,最近刚在上海一家小公司实习,做微信小程序开发。最近工作遇到一个小问题。 微信小程序图片上传阿里云服务器Oss也折腾了蛮久才解决的,所以特意...

    silvertheo 评论0 收藏0
  • 10分钟上线 - 利用函数计算构建信小程序的Server端

    摘要:本文以开发一个类似语音口令红包小程序为例,向您讲解如何使用阿里云函数计算快速构建微信小程序的服务端。 前言 这篇文章适合所有的想微信小程序开发新手、老鸟以及想准备学习开发微信小程序的程序猿。本文以开发一个类似语音口令红包小程序为例,向您讲解如何使用阿里云函数计算快速构建微信小程序的服务端。通过本文,您将会了解以下内容: demo概览 传统服务器架构 VS Serverless架构 S...

    levinit 评论0 收藏0
  • 10分钟上线 - 利用函数计算构建信小程序的Server端

    摘要:本文以开发一个类似语音口令红包小程序为例,向您讲解如何使用阿里云函数计算快速构建微信小程序的服务端。 前言 这篇文章适合所有的想微信小程序开发新手、老鸟以及想准备学习开发微信小程序的程序猿。本文以开发一个类似语音口令红包小程序为例,向您讲解如何使用阿里云函数计算快速构建微信小程序的服务端。通过本文,您将会了解以下内容: demo概览 传统服务器架构 VS Serverless架构 S...

    darryrzhong 评论0 收藏0

发表评论

0条评论

Yang_River

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<