侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

微信小程序环境下将文件上传到OSS的方法步骤

微信(小程序)  /  管理员 发布于 5年前   1096

步骤 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) + ')' +'
' +''; }); }, BeforeUpload: function(up, file) { check_object_radio(); get_dirname(); set_upload_param(up, file.name, true); }, UploadProgress: function(up, file) { var d = document.getElementById(file.id); d.getElementsByTagName('b')[0].innerHTML = '' + file.percent + "%"; var prog = d.getElementsByTagName('div')[0]; var progBar = prog.getElementsByTagName('div')[0] progBar.style.width= 2*file.percent+'px'; progBar.setAttribute('aria-valuenow', file.percent); }, FileUploaded: function(up, file, info) { if (info.status == 200) { document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = 'upload to oss success, object name:' + get_uploaded_object_name(file.name); } else { document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = info.response; } }, Error: function(up, err) { document.getElementById('console').appendChild(document.createTextNode("\nError xml:" + err.response)); } }});uploader.init();

index.html

    OSS web直传    

OSS web直传---直接在JS签名

  1. 基于plupload封装
  2. 支持html5,flash,silverlight,html4 等协议上传
  3. 可以运行在PC浏览器,手机浏览器,微信
  4. 可以选择多文件上传
  5. 显示上传进度条
  6. 可以控制上传文件的大小
  7. 最关键的是,让你10分钟之内就能移植到你的系统,实现以上牛逼的功能!
  8. 注意一点,bucket必须设置了Cors(Post打勾),不然没有办法上传
  9. 注意一点,把upload.js 里面的host/accessid/accesskey改成您上传所需要的信息即可
  10. 此方法是直接在前端签名,有accessid/accesskey泄漏的风险, 线上生产请使用后端签名例子点击查看详细文档

上传文件名字保持本地文件名字 上传文件名字是随机文件名
上传到指定目录:

您所选择的文件列表:

你的浏览器不支持flash,Silverlight或者HTML5!
选择文件 开始上传

 

实现点击按钮选择图片后显示图片并且可以预览该图片

跳转的按钮在子组件

this.$navigate({url:"content"})this.$parent.$navigate({url:"content"})wepy.navigateTo({url: '/pages/content'})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

您可能感兴趣的文章:

  • PHP文件上传小程序 适合初学者学习!
  • 微信小程序学习笔记之文件上传、下载操作图文详解
  • 微信小程序实现图片轮播及文件上传


  • 上一条:
    小程序根据手机机型设置自定义底部导航距离
    下一条:
    gulp构建小程序的方法步骤
  • 昵称:

    邮箱:

    1条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 微信模板消息改版后发送规则记录(微信订阅消息参数值内容限制说明)(1个评论)
    • 微信支付v3对接所需工具及命令(0个评论)
    • 2023年9月1日起:微信小程序必须备案才能上线运营(0个评论)
    • 腾讯官方客服回应了:微信好友上限约10000个!(1个评论)
    • 2023年做微信小程序的老铁注意:新增收费项、微信小程序获取手机号也收费了(2个评论)
    • 近期文章
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • Laravel从Accel获得5700万美元A轮融资(0个评论)
    • 在go + gin中gorm实现指定搜索/区间搜索分页列表功能接口实例(0个评论)
    • 在go语言中实现IP/CIDR的ip和netmask互转及IP段形式互转及ip是否存在IP/CIDR(0个评论)
    • PHP 8.4 Alpha 1现已发布!(0个评论)
    • Laravel 11.15版本发布 - Eloquent Builder中添加的泛型(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2017-10
    • 2018-01
    • 2020-03
    • 2021-06
    • 2021-10
    • 2022-03
    • 2023-02
    • 2023-06
    • 2023-07
    • 2023-08
    • 2023-10
    • 2023-11
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客