用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

微信小程序里如何用阿里云上传视频图片

Rolan 2019-4-9 00:43

网上也有对于阿里云如何在微信小程序里使用,但是很不全,包括阿里云文档的最佳实践里。

微信小程序里如何用阿里云上传视频,图片。。 
纯手写,踩了半天多的坑干出来了。。。

网上也有对于阿里云如何在微信小程序里使用,但是很不全,包括阿里云文档的最佳实践里。

话不多说上代码了。

  1. 1 upvideo(){
  2. 2 var aliOssParams = util.aliOssParams();//主要是获取上传阿里云的加密策略policy和签名signature;以及上传自己要上传到阿里云的地址,当然还有自己阿里云accessid。
  3. 3 //上传视频到阿里云
  4. 4 var that = this;
  5. 5 wx.chooseVideo({
  6. 6 maxDuration: 10,
  7. 7 success: function (res) {
  8. 8 var tempFilePath = res.tempFilePath;
  9. 9 var stringFilePath = String(tempFilePath);
  10. 10 var indexType = stringFilePath.lastIndexOf('.');
  11. 11 var type = stringFilePath.substring(indexType);
  12. 12 var alikey = 'video/'+new Date().getTime() +
  13. 13 Math.floor(Math.random() * 1000)+ type ;//随机1000内的数加上时间戳作为你存放在阿里云video目录下名字和类型。
  14. 14 wx.uploadFile({
  15. 15 url:aliOssParams.host,
  16. 16 filePath: tempFilePath,
  17. 17 name: 'file',
  18. 18 formData: {
  19. 19 name: tempFilePath,
  20. 20 key: alikey,//这个是关键它是定义存放在阿里云那个目录下
  21. 21 policy:aliOssParams.policy,//上传阿里云的加密策略
  22. 22 OSSAccessKeyId: aliOssParams.aid,//自己阿里云的aid
  23. 23 success_action_status: "200",
  24. 24 signature: aliOssParams.signature,//上传阿里云的签名
  25. 25 },
  26. 26 success: function (res) {
  27. 27 var videoUrl = aliOssParams.host+'/'+alikey;//这就是
  28. 28 刚上传阿里云后的存放的地址链接,通过它打开你刚上传视频。
  29. 29 that.videoUrl = videoUrl;
  30. 30 console.log('that',that,videoUrl);
  31. 31 wx.showToast({
  32. 32 title: "上传成功",
  33. 33 icon: 'success',
  34. 34 duration: 1000
  35. 35 })
  36. 36 },
  37. 37 fail: function ({ errMsg }) {
  38. 38 wx.showToast({
  39. 39 title: "上传失败",
  40. 40 duration: 1000
  41. 41 })
  42. 42 },
  43. 43 })
  44. 44 }
  45. 45 })
  46. 46

通过代码大家可以看到最关键的是啥,如何获取加密策略和签名了,当然了,阿里云最佳实践里有demo,但是crypto这个库已经废弃了,它demo给你带过来的crypto,你只能自己去提取了。

 这里是我提为大家提取的crypto函数,直接copy用。

  • View Code

  •   有了上面的crypto工具函数了,就去看看具体如何生成签名与加密策略吧。。
  1. import base64 from "base-64"
  2. import {Crypto} from "./crypto.js"
  3. const util = {
  4. aliOssParams(){
  5. var aid = "xxxxxxx";//你自己的阿里云的accessid
  6. var aky="xxxxxxxxxx";//你自己的阿里云的accesskey
  7. var host = "https://xxxxxxxxx.aliyuncs.com";//你自己的阿里云域名
  8. var policyText = {
  9. "expiration": "2022-01-01T12:00:00.000Z",//上传的文件失效日期自己定义
  10. "conditions": [
  11. ["content-length-range", 0, 10485760000]//上传的内容大小,自己定义
  12. ]
  13. };
  14. var policy = base64.encode(JSON.stringify(policyText));//生成的加密策略
  15. var bytes = Crypto.util.HMAC(Crypto.util.SHA1, policy, aky, { asBytes: true }) ;
  16. var signature = Crypto.util.bytesToBase64(bytes);//生成的签名
  17. return {
  18. policy: policy,
  19. signature:signature,
  20. aid:aid,
  21. host: host
  22. }
  23. }
  24. }
  25. export {util}

至于如何上传图片,大体如下,请保证以上都已经跑通了,base64记得你上面引到。。

多张图片的上传如此

  1. upMyImg(){
  2. var aliOssParams = util.aliOssParams();
  3. var that = this;
  4. wx.chooseImage({
  5. count: 9, //最多可以选择的图片总数
  6. // sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
  7. sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
  8. success: function (res) {
  9. // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
  10. var tempFilePaths = res.tempFilePaths;
  11. //启动上传等待中...
  12. wx.showToast({
  13. title: '正在上传...',
  14. icon: 'loading',
  15. mask: true,
  16. duration: 10000
  17. })
  18. var uploadImgCount = 0;
  19. var tempFilePath;
  20. var stringFilePath = '';
  21. var alikey = '' ;
  22. var type='';
  23. for (var i = 0, h = tempFilePaths.length; i < h; i++) {
  24. // stringFilePath= String(tempFilePaths[i]);
  25. // type = stringFilePath.substring(stringFilePath.lastIndexOf('.'));
  26. alikey = 'imagees/'+new Date().getTime() + Math.floor(Math.random() * 150)+ '.jpg';
  27. that.srcs.push(tempFilePaths[i]);
  28. that.setData({srcs: that.srcs});
  29. wx.uploadFile({
  30. url: aliOssParams.host,
  31. filePath: tempFilePaths[i],//上传图片的路径
  32. name: 'file',
  33. formData: {
  34. key: alikey,
  35. name: tempFilePaths[i],
  36. policy:aliOssParams.policy,
  37. OSSAccessKeyId: aliOssParams.aid,
  38. success_action_status: "200",
  39. signature: aliOssParams.signature,
  40. },
  41. success: function (res) {
  42. uploadImgCount++;
  43. console.log('rrrs',res,tempFilePaths[i]);
  44. // var data = JSON.parse(res.data);
  45. //服务器返回格式: { "Catalog": "testFolder", "FileName": "1.jpg", "Url": "https://test.com/1.jpg" }
  46. // console.log('rrr',data);
  47. console.log('ddd222',res,aliOssParams.host,alikey);
  48. // var productInfo = that.data.productInfo;
  49. // if (productInfo.bannerInfo == null) {
  50. // productInfo.bannerInfo = [];
  51. // }
  52. // productInfo.bannerInfo.push({
  53. // "catalog": data.Catalog,
  54. // "fileName": data.FileName,
  55. // "url": data.Url
  56. // });
  57. // that.setData({
  58. // productInfo: productInfo
  59. // });
  60. //如果是最后一张,则隐藏等待中
  61. if (uploadImgCount == tempFilePaths.length) {
  62. // that.srcs.push(tempFilePaths[i]);
  63. console.log(that.srcs,3222);
  64. wx.hideToast();
  65. wx.showToast({
  66. title: "上传成功",
  67. icon: 'success',
  68. duration: 1000
  69. })
  70. }
  71. },
  72. fail: function (res) {
  73. wx.hideToast();
  74. wx.showModal({
  75. title: '错误提示',
  76. content: '上传图片失败',
  77. showCancel: false,
  78. success: function (res) { }
  79. })
  80. }
  81. });
  82. }
  83. }
  84. })
  85. // 上传图片完
  86. }
  87.   

都是自己亲测,亲坑。。。解决了你的问题,就随手一赞。。

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 不拆贱人 来自: cnblogs