微信小程序直传阿里云OSS

admin

官方教程：https://help.aliyun.com/document_detail/92883.html

个人整理：

第一步：跨域设置里设置规则



第二步：小程序后台配置uploadfile的域名





第三步：制作一个生成签名后端接口

主要生成：policy signature 也可以吧OSSAccessKeyId后端返回

代码如下：

1. $key= '';     // 请填写您的AccessKeySecret。
   
2.         $now = time();
   
3.         $expire = 10000;  //设置该policy超时时间是10s. 即这个policy过了这个有效时间，将不能访问。
   
4.         $end = $now + $expire;
   
5.         $expiration = $this->gmt_iso8601($end);
   
6. 
   
7.         //最大文件大小.用户可以自己设置
   
8.         $condition = array(0=>'content-length-range', 1=>0, 2=>1048576000);
   
9.         $conditions[] = $condition;
   
10.         $arr = array('expiration'=>$expiration,'conditions'=>$conditions);
    
11.         $policy = json_encode($arr);
    
12.         $base64_policy = base64_encode($policy);
    
13.         $response['policy'] = $base64_policy;
    
14. 
    
15.         $string_to_sign = $base64_policy;
    
16.         $signature = base64_encode(hash_hmac('sha1', $string_to_sign, $key, true));
    
17. 
    
18.         $response['signature'] = $signature;
    
19.         $this->ajaxReturn($response);

复制代码

第四步，微信小程序代码



参数解释：

1：filePath 指本地图片文件地址
2：host 就是第二步填写的上传域名
3：key 保存到阿里云OSS上的文件名
4：policy signature  都是通过第三步后端返回的

1. wx.uploadFile({
   
2.   url: host, // 开发者服务器的URL。
   
3.   filePath: filePath,
   
4.   name: 'file', // 必须填file。
   
5.   formData: {
   
6.     key,
   
7.     policy,
   
8.     OSSAccessKeyId: '',
   
9.     signature,
   
10.     // 'x-oss-security-token': securityToken // 使用STS签名时必传。
    
11.   },
    
12.   success: (res) => {
    
13.     if (res.statusCode === 204) {
    
14.       console.log('上传成功');
    
15.     }
    
16.   },
    
17.   fail: err => {
    
18.     console.log(err);
    
19.   }
    
20. });

复制代码