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

本文涉及的产品
对象存储 OSS,20GB 3个月
对象存储 OSS,内容安全 1000次 1年
对象存储 OSS,恶意文件检测 1000次 1年
简介: 当前的通用文件上传方式是通过前端上传到服务器,再由服务器转存至对象存储。这种方式在处理小文件时效率尚可,但大文件上传因受限于服务器带宽,速度较慢。例如,一个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


相关实践学习
借助OSS搭建在线教育视频课程分享网站
本教程介绍如何基于云服务器ECS和对象存储OSS,搭建一个在线教育视频课程分享网站。
目录
打赏
0
3
1
0
2
分享
相关文章
拥抱 OpenTelemetry:阿里云 Java Agent 演进实践
本文介绍了阿里云 Java Agent 4.x 版本在基于 OTel Java Agent 二次开发过程中的实践与思考,并重点从功能、性能、稳定性、兼容性四个方面介绍了所做的工作。同时也介绍了阿里云可观测团队积极参与开源建设取得的丰厚成果。
341 7
拥抱 OpenTelemetry:阿里云 Java Agent 演进实践
java制作海报四:java BufferedImage 转 InputStream 上传至OSS。png 图片合成到模板(另一个图片)上时,透明部分变成了黑色
这篇文章主要介绍了如何将Java中的BufferedImage对象转换为InputStream以上传至OSS,并解决了png图片合成时透明部分变黑的问题。
171 1
Java连接阿里云MaxCompute例
要使用Java连接阿里云MaxCompute数据库,首先需在项目中添加MaxCompute JDBC驱动依赖,推荐通过Maven管理。避免在代码中直接写入AccessKey,应使用环境变量或配置文件安全存储。示例代码展示了如何注册驱动、建立连接及执行SQL查询。建议使用RAM用户提升安全性,并根据需要配置时区和公网访问权限。具体步骤和注意事项请参考阿里云官方文档。
474 10
通过Java SDK调用阿里云模型服务
在阿里云平台上,可以通过创建应用并使用模型服务完成特定任务,如生成文章内容。本示例展示了一段简化的Java代码,演示了如何调用阿里云模型服务生成关于“春秋战国经济与文化”的简短文章。示例代码通过设置系统角色为历史学家,并提出文章生成需求,最终处理并输出生成的文章内容。在实际部署前,请确保正确配置环境变量中的密钥和ID,并根据需要调整SDK导入语句及类名。更多详情和示例,请参考相关链接。
Java本地高性能缓存实践问题之阿里云机器学习团队开源社区的问题如何解决
Java本地高性能缓存实践问题之阿里云机器学习团队开源社区的问题如何解决
|
28天前
|
java异步判断线程池所有任务是否执行完
通过上述步骤,您可以在Java中实现异步判断线程池所有任务是否执行完毕。这种方法使用了 `CompletionService`来监控任务的完成情况,并通过一个独立线程异步检查所有任务的执行状态。这种设计不仅简洁高效,还能确保在大量任务处理时程序的稳定性和可维护性。希望本文能为您的开发工作提供实用的指导和帮助。
87 17
|
2月前
|
Java—多线程实现生产消费者
本文介绍了多线程实现生产消费者模式的三个版本。Version1包含四个类:`Producer`(生产者)、`Consumer`(消费者)、`Resource`(公共资源)和`TestMain`(测试类)。通过`synchronized`和`wait/notify`机制控制线程同步,但存在多个生产者或消费者时可能出现多次生产和消费的问题。 Version2将`if`改为`while`,解决了多次生产和消费的问题,但仍可能因`notify()`随机唤醒线程而导致死锁。因此,引入了`notifyAll()`来唤醒所有等待线程,但这会带来性能问题。
Java—多线程实现生产消费者
Java 多线程 面试题
Java 多线程 相关基础面试题
Java多线程——synchronized、volatile 保障可见性
Java多线程中,`synchronized` 和 `volatile` 关键字用于保障可见性。`synchronized` 保证原子性、可见性和有序性,通过锁机制确保线程安全;`volatile` 仅保证可见性和有序性,不保证原子性。代码示例展示了如何使用 `synchronized` 和 `volatile` 解决主线程无法感知子线程修改共享变量的问题。总结:`volatile` 确保不同线程对共享变量操作的可见性,使一个线程修改后,其他线程能立即看到最新值。
Java多线程是什么
Java多线程简介:本文介绍了Java中常见的线程池类型,包括`newCachedThreadPool`(适用于短期异步任务)、`newFixedThreadPool`(适用于固定数量的长期任务)、`newScheduledThreadPool`(支持定时和周期性任务)以及`newSingleThreadExecutor`(保证任务顺序执行)。同时,文章还讲解了Java中的锁机制,如`synchronized`关键字、CAS操作及其实现方式,并详细描述了可重入锁`ReentrantLock`和读写锁`ReadWriteLock`的工作原理与应用场景。

相关产品

  • 对象存储