摘要:本文将带你了解[微信小程序开发之]上传图片到阿里云OSS,希望本文对大家学微信有所帮助。
本文将带你了解[微信小程序开发之]上传图片到阿里云OSS,希望本文对大家学微信有所帮助。
我的方法需要借助客服功能来实现,虽然繁琐,但是目的达成了~
1.将小程序选择的照片上传至微信临时服务器并返回图片url;(需要开通客服功能)
2.将url返回给自己的后台,后台通过url获取流再上传至阿里OSS;
这里实现第二步:
关于如何开通客服功能的消息的配置可以看我的上一篇博客点我查看上传图片到微信临时服务器首先要获取到access_token,有效期2小时,token详情看这里GET方法请求//获取access_token
https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET1212参数说明grant_type填 client_credentialappid第三方用户唯一凭证secret上微信公众平台小程序扫二维码查看返回//获取成功返回
{
"access_token": "ACCESS_TOKEN",
"expires_in": 7200
}拿到access_token后就可以上传临时文件了//上传临时文件
https://api.weixin.qq.com/cgi-bin/media/upload?access_token=ACCESS_TOKEN&type=TYPE1212GET方法请求参数说明access_token调用接口凭证type看下面mediaform-data中媒体文件标识图片(image): 1M,支持JPG格式语音(voice):2M,播放长度不超过60s,支持AMR\MP3格式视频(video):10MB,支持MP4格式缩略图(thumb):64KB,支持JPG格式媒体文件在后台保存时间为3天,即3天后media_id失效。各位记住了,详情看这里返回//上传成功返回
{
"type": "image",
"media_id": "R-Y5NXGd1tUUeKKEX37eV5q63MoPNQKW8xpnb_29Z3Yp22flghiZIRuGny0uYBRZ",
"created_at": 1501137599
}这里的media_id就是刚才上传的文件,怎么打开呢?不要慌!用微信官方调试工具即可查看刚才上传的图片如果出现下图的样子,就表示success了,但是图片不应该是返回url吗 ? 怎么返回只有个header其实返回的是图片的流如果想要看一下图片呢,可以在浏览器直接输下面这段就会提示下载图片,参数上面都有//获取文件
https://api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID1212既然上传成功了,也看到图片了,下面就该上传到阿里云OSS上并返回url阿里云官方文档有写,我后台用的是NodeJs,大家根据自己的后台看阿里文档就是通过读取微信临时服务器图片的流到OSS并转成图片存起来,然后返回给咱们阿里的图片url呵(ni)呵(mei)哒(de)~官方总是写的简单难懂,能少写就少写!我贴一下Node后台上传图片的代码var express = require('express');
var router = express.Router();
var fs = require('fs');
var commonResult = require('../../service/commonResult');
//阿里云OSS
var co = require('co');
var OSS = require('ali-oss');
var client = new OSS({
region: 'oss-cn-beijing',//填自己的
accessKeyId: 'xxx',//填自己的
accessKeySecret: 'xxx',//填自己的
endPoint: '//oss-cn-beijing.aliyuncs.com',//如果指定了endpoint,则region会被忽略
bucket: 'xxx'//填自己的
});
//上传图片文件
router.post('/uploadFile', function (req, res, next) {
var url = req.body.url;//这个url是微信小程序直接全部传过来的,就是刚才直接复制在浏览器就能下载到图片的那个。打印出来是这样的: https://api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID
var timestamp = new Date().getTime();
var path = './test';
var key = 'test/' + timestamp;
//选择bucket
client.useBucket('xxx');//填自己的
//获取远程文件,并以流写入文件
console.log("微信临时文件地址 = " + url)
var stream = request(url).pipe(fs.createWriteStream(path));
stream.on('error', function (err) {
console.log(err);
});
//流写入完毕
stream.on('finish', function () {
co(function*() {
var result = yield client.put(key, path);
console.log(result);
commonResult.returnSuccess(res, result.url);
}).catch(function (err) {
console.log(err);
commonResult.returnFailed(res, "上传失败");
});
});
});
module.exports = router;
commonResult是一个返回Json格式数据的稍微封装了一下var CommonResult = require('../models/commonResult');
/**
* 返回失败
* @param err
* @param res
*/
exports.returnFailed = function (res, err) {
var commonResult = new CommonResult();
commonResult.success = false;
commonResult.message = err;
commonResult.data = null;
res.send(commonResult);
};
/**
* 返回成功
* @param res
*/
exports.returnSuccess = function (res, data) {
var commonResult = new CommonResult();
commonResult.success = true;
commonResult.message = "获取成功";
if (data != null && data != "") {
commonResult.data = data;
} else {
commonResult.data = null;
}
res.send(commonResult);
};123456789101112131415161718192021222324252627282930123456789101112131415161718192021222324252627282930当然有个实体CommonResultfunction CommonResult() {
this.success;
this.message;
this.data;
}
module.exports = CommonResult;12345671234567注意引入的路径问题,看自己项目的路径自行修改下,Node后台就回返回给微信小程序一个上传完成的url地址了,这样可以直接点击url查看图片了,然后拿到url该干嘛干嘛~小程序文档里确实有个拓展接口wx.base64ToArrayBuffer(base64)当然,小程序上传的图片直接转化为流直接post上传是最佳的选择,但是查了许多资料都没能实现,还望有大神指导~//网上资料都是这个,不能用还是不会用???!!!
var uploadImage = this.data.imageList[0]
var reader = new FileReader()
reader.onload = function (e) {
var arrayBuffer = reader.result;
var base64 = wx.arrayBufferToBase64(arrayBuffer)
}
reader.readAsArrayBuffer(new Blob(this.data.imageList))1234567812345678
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之微信频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号