概览

小程序oss直传实践（支付宝） - 图1

下载安装支付宝小程序IDE

小程序下载页面
image.png

开通并配置阿里云oss_bucket跨域

image.png

通过示例demo测试并获取上传需要的签名（signature）和加密策略（policy）

下载web直传demo

  1.         [oss-h5-upload-js-direct.zip](https://www.yuque.com/attachments/yuque/0/2019/zip/201986/1564113232458-d6be6101-3e90-4fb7-bd63-6243eaf10962.zip?_lake_card=%7B%22uid%22%3A%22rc-upload-1564112886134-10%22%2C%22src%22%3A%22https%3A%2F%2Fwww.yuque.com%2Fattachments%2Fyuque%2F0%2F2019%2Fzip%2F201986%2F1564113232458-d6be6101-3e90-4fb7-bd63-6243eaf10962.zip%22%2C%22name%22%3A%22oss-h5-upload-js-direct.zip%22%2C%22size%22%3A351978%2C%22type%22%3A%22application%2Fx-zip-compressed%22%2C%22ext%22%3A%22zip%22%2C%22progress%22%3A%7B%22percent%22%3A0%7D%2C%22status%22%3A%22done%22%2C%22percent%22%3A0%2C%22id%22%3A%22aDU35%22%2C%22card%22%3A%22file%22%7D)

按照配置说明配置upload.js文件

    ![image.png](https://cdn.nlark.com/yuque/0/2019/png/201986/1564113369040-50c41fad-77fc-4153-8cb9-715859b03217.png#align=left&display=inline&height=64&margin=%5Bobject%20Object%5D&name=image.png&originHeight=114&originWidth=544&size=13521&status=done&style=none&width=307)![image.png](https://cdn.nlark.com/yuque/0/2019/png/201986/1564113430014-e0d26a2d-9ad5-4280-a28a-07de92052f20.png#align=left&display=inline&height=77&margin=%5Bobject%20Object%5D&name=image.png&originHeight=112&originWidth=565&size=15349&status=done&style=none&width=387)

字段说明
  • accessid : accessid
  • accesskey： accesskey

  • host： Bucket域名（非EndPoint）

    image.png

    通过示例demo

    image.pngimage.png

    示例请求头

    ```yaml

    General

    Request URL: http://zhufubao.oss-cn-beijing.aliyuncs.com/ Request Method: POST Status Code: 200 OK Remote Address: 59.110.190.29:80 Referrer Policy: no-referrer-when-downgrade

Repons Headers

Access-Control-Allow-Methods: GET, POST, PUT, HEAD, DELETE Access-Control-Allow-Origin: * Access-Control-Expose-Headers: etag, x-oss-request-id Access-Control-Max-Age: 0 Connection: keep-alive Content-Length: 0 Content-MD5: C1pYYZJo0Qqh/4YpcQtbbg== Date: Thu, 25 Jul 2019 00:28:54 GMT ETag: “0B5A58619268D10AA1FF8629710B5B6E” Server: AliyunOSS x-oss-hash-crc64ecma: 9209453800795768232 x-oss-request-id: 5D38F7C55B40CCDBF4DB6FD9 x-oss-server-time: 25

Request Headers

Provisional headers are shown Content-Type: multipart/form-data; boundary=——WebKitFormBoundarygxUvBqLDZHl9ZqTY Origin: null User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36

Form data:

name: DNF.ico key: ${filename} policy: == OSSAccessKeyId: success_action_status: 200 signature: ** file: (binary)



<a name="HMyPZ"></a>
## 创建并配置uploadFile项目demo
<a name="9ooqB"></a>
#### 新建test项目（不启用云服务）
![image.png](https://cdn.nlark.com/yuque/0/2019/png/201986/1564114506230-f6863a3d-8fff-4455-9a30-322be807803b.png#align=left&display=inline&height=279&margin=%5Bobject%20Object%5D&name=image.png&originHeight=436&originWidth=406&size=35437&status=done&style=none&width=260)![image.png](https://cdn.nlark.com/yuque/0/2019/png/201986/1564114589357-15fd7a7e-689c-4c63-939e-941ff939c9bc.png#align=left&display=inline&height=148&margin=%5Bobject%20Object%5D&name=image.png&originHeight=259&originWidth=581&size=15017&status=done&style=none&width=332)
<a name="YWOyi"></a>
#### 编辑视图文件 /page/index/index.axml

```javascript
<view> uploadFile </view>
<button onTap="uploadFile"> Click me! Upload File </button>

编辑逻辑文件 /pages/index/index.js

Page({
  uploadFile() {
    my.chooseImage({
      chooseImage: 1,
      success: res => {
        const path = res.apFilePaths[0];
        console.log(path);
        my.uploadFile({
          url: 'https://zhufubao.oss-cn-beijing.aliyuncs.com',
          fileType: 'image',
          fileName: 'file',
          filePath: path,
          formData: {
            key: res.apFilePaths[0], //上传到OSS的Object名称。 如果名称包含路径，如a/b/c/b.jpg， 则OSS会自动创建相应的文件夹。
            policy: '',
            OSSAccessKeyId: '',
            signature: '',
            success_action_status: 200 //不设置上传成功后则反馈204状态码
          },
          success: res => {
            my.alert({ title: '上传成功' });
          },
          fail: function(res) {
            my.alert({ title: '上传失败' });
          },
        });
      },
    });
  },
});

调试上传需要注意的几个地方

  • ‘，’注意中英文
  • 调试面板查看的204状态码为文件已成功上传
  • 主页文件在index.js，有关小程序的文件结构详情参考

视频

小程序oss直传实践.wmv (23.99MB)

f&q

web直传demo报错

Error xml:<?xml version="1.0" encoding="UTF-8"?>
<Error>
  <Code>AccessDenied</Code>
  <Message>You have no right to access this object because of bucket acl.</Message>
  <RequestId>5D38EAF3B619A0AE40B6C2D9</RequestId>
  <HostId>post-test.oss-cn-hangzhou.aliyuncs.com</HostId>
</Error>

值得注意的是upload.js文件的 host字段 格式为bucket.endpoint 其中bucket需要和自己创建的bucket名称相吻合
**

小程序中的formData能否不配置验证字段？

policy: '',
OSSAccessKeyId: '',
signature: ''

Q：可以，bucket设置为公共读写即可，但是oos跨域设置必须要配置。uploadFile的参数字段传递详情参考

accessid，accesskey如何获取

Q：阿里云验证机制，具体可参考官方文档

640X60.jpg