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

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

阿里云官方文档:

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用。

+ View Code

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

import
base64 from
"base-64"

import
{Crypto} from
"./crypto.js"

const util = {

aliOssParams(){

var
aid =
"xxxxxxx"
;
//你自己的阿里云的accessid

var
aky=
"xxxxxxxxxx"
;
//你自己的阿里云的accesskey

var
host =
"https://xxxxxxxxx.aliyuncs.com"
;//你自己的阿里云域名

var
policyText = {

"expiration"
:
"2022-01-01T12:00:00.000Z"
,
//上传的文件失效日期自己定义

"conditions"
: [

[
"content-length-range"
, 0, 10485760000]
//上传的内容大小，自己定义

]

};

var
policy = base64.encode(JSON.stringify(policyText));
//生成的加密策略

var
bytes = Crypto.util.HMAC(Crypto.util.SHA1, policy, aky, { asBytes:
true
}) ;

var
signature = Crypto.util.bytesToBase64(bytes);
//生成的签名

return
{

policy: policy,

signature:signature,

aid:aid,

host: host

}

export
{util}

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

多张图片的上传如此

upMyImg(){

var
aliOssParams = util.aliOssParams();

var
that =
this
;

wx.chooseImage({

count: 9,
//最多可以选择的图片总数

// sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有

sourceType: [
'album'
,
'camera'
],
// 可以指定来源是相册还是相机，默认二者都有

success:
function
(res) {

// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片

var
tempFilePaths = res.tempFilePaths;

//启动上传等待中...

wx.showToast({

title:
'正在上传...'
,

icon:
'loading'
,

mask:
true
,

duration: 10000

})

var
uploadImgCount = 0;

var
tempFilePath;

var
stringFilePath =
''
;

var
alikey =
''
;

var
type=
''
;

for
(
var
i = 0, h = tempFilePaths.length; i < h; i++) {

// stringFilePath= String(tempFilePaths[i]);

// type = stringFilePath.substring(stringFilePath.lastIndexOf('.'));

alikey =
'imagees/'
+
new
Date().getTime() + Math.floor(Math.random() * 150)+
'.jpg'
;

that.srcs.push(tempFilePaths[i]);

that.setData({srcs: that.srcs});

wx.uploadFile({

url: aliOssParams.host,

filePath: tempFilePaths[i],
//上传图片的路径

name:
'file'
,

formData: {

key: alikey,

name: tempFilePaths[i],

policy:aliOssParams.policy,

OSSAccessKeyId: aliOssParams.aid,

success_action_status:
"200"
,

signature: aliOssParams.signature,

},

success:
function
(res) {

uploadImgCount++;

console.log(
'rrrs'
,res,tempFilePaths[i]);

// var data = JSON.parse(res.data);

//服务器返回格式: { "Catalog": "testFolder", "FileName": "1.jpg", "Url": "https://test.com/1.jpg" }

// console.log('rrr',data);

console.log(
'ddd222'
,res,aliOssParams.host,alikey);

// var productInfo = that.data.productInfo;

// if (productInfo.bannerInfo == null) {

// productInfo.bannerInfo = [];

// }

// productInfo.bannerInfo.push({

// "catalog": data.Catalog,

// "fileName": data.FileName,

// "url": data.Url

// });

// that.setData({

// productInfo: productInfo

// });

//如果是最后一张,则隐藏等待中

if
(uploadImgCount == tempFilePaths.length) {

// that.srcs.push(tempFilePaths[i]);

console.log(that.srcs,3222);

wx.hideToast();

wx.showToast({

title:
"上传成功"
,

icon:
'success'
,

duration: 1000

})

}

},

fail:
function
(res) {

wx.hideToast();

wx.showModal({

title:
'错误提示'
,

content:
'上传图片失败'
,

showCancel:
false
,

success:
function
(res) { }

})

}

});

}

})

// 上传图片完

}

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

原文链接：https://blog.csdn.net/English0523/article/details/89182283

你可能也喜欢