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

本是古典何须时尚 2022-02-04 07:55 248阅读 0赞

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

为了微信小程序客服端实现自拍视频能够分享给多个好友，我们需要把小程序自拍的视频存储到服务器，而阿里云在性能和速度上比较不错，所以我们选择了阿里云作服务器。

阿里云官方文档:

[https://help.aliyun.com/document\_detail/31925.html?spm=a2c4g.11186623.6.634.AMs4Fj][https_help.aliyun.com_document_detail_31925.html_spm_a2c4g.11186623.6.634.AMs4Fj]

需要由后台提供接口,前端获取一些必要参数

纯手写，踩了半天多的坑干出来了。。。

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

**上传流程:**

选择图片-->获取到图片临时路径,将图片临时路径存入data

点击发布按钮-->获取oss参数

获取oss参数成功-->执行上传阿里云

上传阿里云成功-->执行上传服务器

上传服务器成功-->结束整个上传流程

由于为了方便大家浏览,没有用函数回调.

大家可以根据自己的需求,结合自己的场景,来进行函数回调或者使用ES6的Promise方法.

上传阿里云过程中几个容易忽视的坑: 图片路径处理/时间戳判断

**话不多说上代码了。**

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

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

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

[\+  ][ ]

有了上面的crypto工具函数了，就去看看具体如何生成签名与加密策略吧。。

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

多张图片的上传如此

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

[https://blog.csdn.net/enweitech/article/details/89182283][https_blog.csdn.net_enweitech_article_details_89182283]

都是自己亲测，亲坑。。。码字很累。解决了你的问题，就分享一哈吧。

[https_help.aliyun.com_document_detail_31925.html_spm_a2c4g.11186623.6.634.AMs4Fj]: https://help.aliyun.com/document_detail/31925.html?spm=a2c4g.11186623.6.634.AMs4Fj
[ ]: https://www.cnblogs.com/HfdBlog/p/9866369.html#
[https_blog.csdn.net_enweitech_article_details_89182283]: https://blog.csdn.net/enweitech/article/details/89182283