微信小程序环境下将文件上传到OSS的方法步骤
微信(小程序)  /  管理员 发布于 3年前   673
步骤 1: 配置 Bucket 跨域
客户端进行表单直传到 OSS 时,会从浏览器向 OSS 发送带有 Origin 的请求消息。OSS 对带有 Origin 头的请求消息会进行跨域规则(CORS)的验证。因此需要为 Bucket 设置跨域规则以支持 Post 方法。
步骤 2:配置外网域名到小程序的上传域名白名单中
通过 OSS 控制台查看外网域名。
登录微信小程序平台,配置小程序的上传域名白名单。
步骤 3:使用 Web 端直传实践方案 Demo 进行上传测试
下载应用服务器代码
修改 Demo 中 upload.js 的密钥和地址。
进行上传测试。
获取上传需要的签名(signature)和加密策略(policy)
使用微信小程序上传图片
使用 chooseImage API 进行图片选择,然后调用 uploadFile 进行文件上传
帮助文档
upload.js
accessid= '';accesskey= '';host = '';g_dirname = ''g_object_name = ''g_object_name_type = ''now = timestamp = Date.parse(new Date()) / 1000; var policyText = { "expiration": "2020-01-01T12:00:00.000Z", //设置该Policy的失效时间,超过这个失效时间之后,就没有办法通过这个policy上传文件了 "conditions": [ ["content-length-range", 0, 1048576000] // 设置上传文件的大小限制 ]};var policyBase64 = Base64.encode(JSON.stringify(policyText))message = policyBase64var bytes = Crypto.HMAC(Crypto.SHA1, message, accesskey, { asBytes: true }) ;var signature = Crypto.util.bytesToBase64(bytes);function check_object_radio() { var tt = document.getElementsByName('myradio'); for (var i = 0; i < tt.length ; i++ ) { if(tt[i].checked) { g_object_name_type = tt[i].value; break; } }}function get_dirname(){ dir = document.getElementById("dirname").value; if (dir != '' && dir.indexOf('/') != dir.length - 1) { dir = dir + '/' } //alert(dir) g_dirname = dir}function random_string(len) { len = len || 32; var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; var maxPos = chars.length; var pwd = ''; for (i = 0; i < len; i++) { pwd += chars.charAt(Math.floor(Math.random() * maxPos)); } return pwd;}function get_suffix(filename) { pos = filename.lastIndexOf('.') suffix = '' if (pos != -1) { suffix = filename.substring(pos) } return suffix;}function calculate_object_name(filename){ if (g_object_name_type == 'local_name') { g_object_name += "${filename}" } else if (g_object_name_type == 'random_name') { suffix = get_suffix(filename) g_object_name = g_dirname + random_string(10) + suffix } return ''}function get_uploaded_object_name(filename){ if (g_object_name_type == 'local_name') { tmp_name = g_object_name tmp_name = tmp_name.replace("${filename}", filename); return tmp_name } else if(g_object_name_type == 'random_name') { return g_object_name }}function set_upload_param(up, filename, ret){ g_object_name = g_dirname; if (filename != '') { suffix = get_suffix(filename) calculate_object_name(filename) } new_multipart_params = { 'key' : g_object_name, 'policy': policyBase64, 'OSSAccessKeyId': accessid, 'success_action_status' : '200', //让服务端返回200,不然,默认会返回204 'signature': signature, }; up.setOption({ 'url': host, 'multipart_params': new_multipart_params }); up.start();}var uploader = new plupload.Uploader({ runtimes : 'html5,flash,silverlight,html4', browse_button : 'selectfiles', //multi_selection: false, container: document.getElementById('container'), flash_swf_url : 'lib/plupload-2.1.2/js/Moxie.swf', silverlight_xap_url : 'lib/plupload-2.1.2/js/Moxie.xap', url : 'http://oss.aliyuncs.com', init: { PostInit: function() { document.getElementById('ossfile').innerHTML = ''; document.getElementById('postfiles').onclick = function() { set_upload_param(uploader, '', false); return false; }; }, FilesAdded: function(up, files) { plupload.each(files, function(file) { document.getElementById('ossfile').innerHTML += '' + file.name + ' (' + plupload.formatSize(file.size) + ')' +'Top
- 相关文章
- 小程序开发之跳转微信直播示例api(0个评论)
- 在uni_app中开发小程序之常用功能示例代码汇总(0个评论)
- 小程序开发之多端框架:taro(0个评论)
- 微信小程序前端使用七牛云官方SDK上传七牛云代码示例(0个评论)
- 百度小程序审核未通过,真机审核存在点击返回键退出小程序...解决方式之一tabBar(0个评论)
- 近期文章
- windows系统中安装FFMpeg及在phpstudy环境php7.3 + php-ffmpeg扩展的使用流程步骤(0个评论)
- 在go语言中对浮点的数组、切片(slice)进行正向排序和反向排序(0个评论)
- 在go语言中对整数数组、切片(slice)进行排序和反向排序(0个评论)
- 在go语言中对字符串数组、切片(slice)进行排序和反向排序(0个评论)
- 最新国内免注册ChatGPT体验站_ChatGPT镜像站访问链接地址2023/3/28持续更新(0个评论)
- 在Laravel项目中的实现无密码认证之:发送邮箱链接授权(0个评论)
- 在go语言中使用GoRoutines实现高性能并发批量调用api示例(0个评论)
- Docker撤回受争议的收费方案,又可以继续使用docker了(0个评论)
- 在go语言生成唯一ID之SnowFlake算法(0个评论)
- ChatGPT再出新功能,推出插件功能,能联网、搜索了(0个评论)
- 近期评论
博主 在
2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..xiaoB 在
2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..BUG4 在
你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..博主 在
go语言+beego框架中获取get,post请求的所有参数中评论 @ t1 直接在router.go文件中配就ok..Jade 在
如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号