微信小程序上传文件至阿里云OSS直传(java后端签名+前端直传)

简介: 当前的通用文件上传方式是通过前端上传到服务器,再由服务器转存至对象存储。这种方式在处理小文件时效率尚可,但大文件上传因受限于服务器带宽,速度较慢。例如,一个100MB的文件在5Mbps带宽的阿里云ECS上上传至服务器需160秒。为解决此问题,可以采用后端签名的方式,使微信小程序直接上传文件到阿里云OSS,绕过服务器中转。具体操作包括在JAVA后端引入相关依赖,生成签名,并在微信小程序前端使用这个签名进行文件上传,注意设置正确的请求头和formData参数。这样能提高大文件上传的速度。

问题描述:通用上传方法都是有前端上传至服务器,再由服务器转存至对象存储。这种方法在小文件图片以及音频传输速度较为可以,但针对于大文件上传时,由于收服务器带块影响速度极慢,后使用对象存储分片上传虽然解决了服务器至oss的时间,但前端值服务器的传输过程还是收带宽影响;通常阿里云ECS带宽5M计算的话100MB*8=800Mb/5Mbps=160秒,所以100MB大小的文件如果是满带宽上传到服务器要160秒,所以速度相当慢。

解决方式:使用后端签名小程序直传方式跳过服务器转存。操作方式如下。阿里云OSS文档 如何在微信小程序环境下将文件上传到OSS_对象存储(OSS)-阿里云帮助中心

JAVA后端签名

  • 引入Maven依赖
<dependency>
            <groupId>com.aliyun.oss</groupId>
            <artifactId>aliyun-sdk-oss</artifactId>
            <version>3.8.0</version>
  </dependency>

image.gif

  • 接受参数
Name Type Note
dir String

存储的相对路径。需要计算进policy,因此前端发起putObject请求中key参数的相应字段也要保持一致

  • 返回参数(类型 JSONObject)
Name Type Note
accessId String
policy String Base64编码
signature String
  • 签名参考代码
@GetMapping("/getSign")
    @ResponseBody
    protected AjaxResult getSignature(String dir){
        String endpoint =  "";
        String accessId =  "";
        String accessKey = "";
        try {
            OSSClient ossClient = new OSSClient(endpoint,accessId,accessKey);
            long expireTime = 30;
            long expireEndTime = System.currentTimeMillis() + expireTime * 1000;
            Date expiration = new Date(expireEndTime);
            PolicyConditions policyConds = new PolicyConditions();
            policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1048576000);
            policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir);//根据参数dir计算的policy,如果和前端uploadfile中参数key的相应字段不一致的话是会报错的
            String postPolicy = ossClient.generatePostPolicy(expiration, policyConds);
            byte[] binaryData = postPolicy.getBytes();
            String encodedPolicy = BinaryUtil.toBase64String(binaryData);
            String postSignature = ossClient.calculatePostSignature(postPolicy);
            ossClient.shutdown();//业务完成一定要调用shutdown
            Map<String, Object> map = new HashMap<String, Object>();
            map.put("accessId",accessId);
            map.put("policy", encodedPolicy);
            map.put("signature", postSignature);
            return  AjaxResult.success(map);
        } catch (Exception e) {
            //Assert.fail(e.getMessage());
        }
        return null;
    }

image.gif

前端部分(微信小程序)

注意:wx.uploadFile中请求头header需要配置一个"Content-Type": “multipart/form-data”,不然可能会出现formData带不上的情况

           formData中的key参数,是由dir和name组成的,需要和policy中的一致,不然会报policy无效的错误

 

uploadTest:function(){
    wx.chooseImage({
      count: 1,
      success: function(res) {
        //选择图片成功回调
        wx.showLoading({
          title: '上传中',
          mask: true
        })
        var tempPath=res.tempFilePaths[0]
        var dir='punchImg/'
        //发起后端请求签名
        wx.request({
          url: '<Your signature server>',
          data:{dir:dir},
          success:function(res){
            var l=tempPath.length
            var newName = Date.parse(new Date()) + tempPath.substring(l-10)
            //发起putObject请求,直传OSS
            wx.uploadFile({
              url: 'Your oss url',
              filePath: tempPath,
              name: 'file',
              header: {
                "Content-Type": "multipart/form-data"
              },
              formData:{
                name: newName,
                key:dir+newName,
                policy: res.data.policy,
                OSSAccessKeyId: res.data.accessId,
                success_action_status: '200', 
                signature: res.data.signature
              },
              success:function(res){
                wx.hideLoading()
                console.log(res)
              }
            })
          }
        })
      },
    })
  }

image.gif


相关实践学习
通义万相文本绘图与人像美化
本解决方案展示了如何利用自研的通义万相AIGC技术在Web服务中实现先进的图像生成。
相关文章
|
6月前
|
数据可视化 机器人 Java
聊天软件自动回复脚本,微信抖音快手小红书,消息自动回复工具机器人【java】
包含4个完整模块:主逻辑模块实现核心回复功能,工具模块封装常用函数,UI模块提供可视化控制界面
|
5月前
|
XML Java Android开发
微信虚拟视频插件安卓,微信虚拟相机替换拍照,java源码分享
完整的相机应用项目包含三个主要文件:主活动实现、布局文件和清单文件。代码实现了相机预览、
|
3月前
|
消息中间件 人工智能 Java
抖音微信爆款小游戏大全:免费休闲/竞技/益智/PHP+Java全筏开源开发
本文基于2025年最新行业数据,深入解析抖音/微信爆款小游戏的开发逻辑,重点讲解PHP+Java双引擎架构实战,涵盖技术选型、架构设计、性能优化与开源生态,提供完整开源工具链,助力开发者从理论到落地打造高留存、高并发的小游戏产品。
|
3月前
|
存储 小程序 Java
热门小程序源码合集:微信抖音小程序源码支持PHP/Java/uni-app完整项目实践指南
小程序已成为企业获客与开发者创业的重要载体。本文详解PHP、Java、uni-app三大技术栈在电商、工具、服务类小程序中的源码应用,提供从开发到部署的全流程指南,并分享选型避坑与商业化落地策略,助力开发者高效构建稳定可扩展项目。
|
5月前
|
Java 计算机视觉
微信虚拟视频聊天插件,QQ抖音快手虚拟摄像头工具,替换相机视频流java
实现包含了虚拟摄像头核心功能,可以捕获真实摄像头视频流,处理后输出到虚拟摄像头设备。
|
8月前
|
前端开发 Java 物联网
智慧班牌源码,采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署
智慧班牌系统是一款基于信息化与物联网技术的校园管理工具,集成电子屏显示、人脸识别及数据交互功能,实现班级信息展示、智能考勤与家校互通。系统采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署与私有化定制。核心功能涵盖信息发布、考勤管理、教务处理及数据分析,助力校园文化建设与教学优化。其综合性和可扩展性有效打破数据孤岛,提升交互体验并降低管理成本,适用于日常教学、考试管理和应急场景,为智慧校园建设提供全面解决方案。
530 70
|
6月前
|
XML Java 数据格式
微信不封号无限加人软件,微信一键自动加人软件,java实现批量化加人
本项目包含手机号生成工具与附近人列表展示功能。手机号工具支持批量生成、格式验证及CSV导出,可自定义前缀生成符合中国规则的随机号码。
|
6月前
|
机器人 Java
微信自动回复机器人插件,自动同意回复消息, 微信群管理机器人,JAVA框架
本项目基于开源微信机器人框架开发,提供自动回复私聊消息、自动同意好友请求及微信群管理功能。核心功能包括:自动回复用户消息、处理好友申请(发送欢迎语并备注新好友)、群聊管理(如欢迎新成员、关键词踢人和群内自动回复)。项目依赖 `weixin-java-mp` 和 `weixin-java-cp` 核心库,并结合 Lombok 和 Guava 提升开发效率。代码结构清晰,包含配置类 `WechatBotConfig` 初始化服务实例,以及多个处理器实现具体逻辑。下载地址:https://www.pan38.com/share.php?code=r4HGg,提取码:8888(仅供学习参考)。
|
9月前
|
Java API Docker
在线编程实现!如何在Java后端通过DockerClient操作Docker生成python环境
以上内容是一个简单的实现在Java后端中通过DockerClient操作Docker生成python环境并执行代码,最后销毁的案例全过程,也是实现一个简单的在线编程后端API的完整流程,你可以在此基础上添加额外的辅助功能,比如上传文件、编辑文件、查阅文件、自定义安装等功能。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
在线编程实现!如何在Java后端通过DockerClient操作Docker生成python环境
|
9月前
|
JavaScript Java Docker
干货含源码!如何用Java后端操作Docker(命令行篇)
只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~

热门文章

最新文章

相关产品

  • 对象存储