微信小程序图片/视频直传阿里云服务器OSS

阿里云官方文档:

https://help.aliyun.com/document_detail/31925.html?spm=a2c4g.11186623.6.634.AMs4Fj

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

    oss: function(token) {var _this = this;wx.request({url: kidUrl + 'JurisdictionOss/encryption',data: {token: token},method: 'POST',header: {'content-type': 'application/json'},success: res => {if (res.statusCode == 200) {_this.setData({accessid: res.data.accessid,policy: res.data.policy,signature: res.data.signature,uploadUrl: res.data.host,uploadUrlend: res.data.dir,expire: res.data.expire,})}}})},

第二步(获取上传的图片的临时路径)

    addPhoto: function(res) {var _this = this;wx.chooseImage({sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function(res) {// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片var tempFilePaths = res.tempFilePaths;_this.setData({photoArr: tempFilePaths})}})},

第三步(图片上传阿里云/服务器)

    //上传照片(阿里云)uploadAli: function(babyData, photoArr) {var _this = this;var uploadUrl = this.data.uploadUrl;var uploadUrlend = this.data.uploadUrlend;var photoArrLen = photoArr.length;wx.uploadFile({url: uploadUrl,formData: babyData,name: 'file',filePath: photoArr[0],header: {'content-type': 'multipart/form-data'},success: res => {if (res.statusCode == 200) {//表示上传成功(可以在阿里云服务器查看上传的图片)}}})},//图片上传服务器uploadRq: function(imgData) {var _this = this;wx.request({url: kidUrl + 'xxxx',data: imgData,method: 'POST',header: {'content-type': 'application/json'},success: res => {//成功后台会给你返回阿里云那边的图片地址}})},

第四步(点击上传图片的按钮操作)

    //发布按钮release: function(e) {var _this = this;//获取照片数组var photoArr = this.data.photoArr;//获取时间var date = this.data.date;var userToken = this.data.userToken;//时间搓var expire = this.data.expire;//获取当前时间搓var expireNow = Date.parse(new Date()) / 1000;//如果当前时间大于获取的时间 则重新获取oss;      if (expireNow > expire) {//重新获取oss_this.oss(userToken);expire = this.data.expire;}//传给阿里云的参数var policy = this.data.policy;var accessid = this.data.accessid;var signature = this.data.signature;var uploadUrlend = this.data.uploadUrlend;//传给阿里云的参数-endvar newPhoto = '';var photoArrsm = '';//由于微信小程序生成的临时路径在上传阿里云的时候不需要上传.所以需要对路径进行处理,但是在手机端上传和PC端上传,图片临时路径的前缀不同,所以需要进行分别的处理if (photoArr[0].indexOf('http://tmp/') != -1) {photoArrsm = uploadUrlend + photoArr[0].replace('http://tmp/', "");}if (photoArr[0].indexOf('wxfile://') != -1) {photoArrsm = uploadUrlend + photoArr[0].replace('wxfile://', "");}// 传给服务器的参数var imgData = {token: userToken,descript: textareaTxt,type: 1,write_time: date,babyid: babyid,phtots_url: photoArrsm}_this.uploadRq(imgData)var babyData = {'Filename': '${filename}','name': 'photoArr[0]','key': uploadUrlend + '${filename}','policy': policy,'OSSAccessKeyId': accessid,'success_action_status': '200', //让服务端返回200,不然，默认会返回204'signature': signature}this.uploadAli(babyData, photoArr)},

上传流程:

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

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

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

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

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

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

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

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

特别注意:

这里官方文档给出的传法是如上图所示,但是在微信小程序中不知道什么原因会导致无法上传报错403,

于是我改了写法,如下图

用这样的写法是可以上传成功的 /修改key的 ${filename} 名字,即是修改上传的文件的名称

未经过允许,禁止转载!!!!

微信小程序图片/视频直传阿里云服务器OSS相关推荐

【微信小程序控制硬件⑧ 】微信小程序以 websocket 连接阿里云IOT物联网平台mqtt服务器，封装起来使用就是这么简单！（附带Demo）
[微信小程序控制硬件第1篇 ] 全网首发,借助 emq 消息服务器带你如何搭建微信小程序的mqtt服务器,轻松控制智能硬件! [微信小程序控制硬件第2篇 ] 开始微信小程序之旅,导入小程序Mqtt客户 ...
微信小程序开发环境（阿里云服务搭建+可运行的demo）
最近微信小程序异常火爆,很多人在学习,下面带着大家搭建下微信小程序的调试环境(client+server),并调试一套demo源码(JavaScript和node.js基础即可,微信推荐使用的语言,无 ...
微信小程序商城，关于基于云服务器的接口文件配置还有数据库配置
这个周闲暇时间做了一个微信小程序商城,具体的代码会打包放我的git仓库,主要实现的前端页面有:登录界面,商品界面,商品详情界面,购物车购买界面,个人信息界面,订单界面.然后在本地用mysql建立了一个 ...
微信小程序上传图片到腾讯云服务器,微信小程序（发帖功能），上传本地图片到腾讯云怎么实现？...
1 我刚开始用 lin-ui组件的 imagePicker组件,但是只能实现图片本地上传,本地预览.删除等功能, 无法跟腾讯云cos对象存储交互. cos对象代码 cos.putObject({ Bu ...
微信小程序与MCU基于阿里云MQTT协议通信
前言 1.参考文章1 阿里官方提供的SDK包文章2 就是这个,官方提供的包,用node.js这
微信小程序图片无法存入云开发数据库，求解决
微信小程序图片无法存入云开发数据库,求解决上传图片的js代码片段上传图片的js代码片段上传图片的js代码片段,觉得自己代码的没错,也能打印出来上传的图片地址,但是发现并没有存进数据库,求大神指点 ...
微信小程序图片上传与内容安全审核
文章目录原由内容审核种类小程序云开发图片检测创建云函数编写图片检测代码小程序图片处理图片上传图片压缩云函数安全检测接入文本检测最后的坑原由之前有开发一个微信小程序,拥有图片 ...
腾讯技术分享：微信小程序音视频技术背后的故事
1.引言微信小程序自2017年1月9日正式对外公布以来,越来越受到关注和重视,小程序上的各种技术体验也越来越丰富.而音视频作为高速移动网络时代下增长最快的应用形式之一,在微信小程序中也当然不能错过. ...
腾讯技术分享：微信小程序音视频与WebRTC互通的技术思路和实践
概述本文来自腾讯视频云终端技术总监rexchang(常青)技术分享,内容分别介绍了微信小程序视音视频和WebRTC的技术特征.差异等,并针对两者的技术差异分享和总结了微信小程序视音视频和WebRTC ...

微信小程序图片/视频直传阿里云服务器OSS

微信小程序图片/视频直传阿里云服务器OSS相关推荐

最新文章

热门文章