馨房 DEV LOG 之 OSS 表单直传方案

[yeojongki]

一、背景

OSS 的上传方式主要(应该)有两种，一是 SDK 上传，二就是本文的主角，利用form 表单直传。之所以不用 SDK 上传，主要是因为 SDK 包体积太大 (一个 aliyun-oss-sdk.min.js 的大小有 426 kb)

具体操作可以参考阿里云官方最佳实践 Web 端 PostObject 直传 ，这里主要用的方案是最后一种，服务端签名直传并设置上传回调，将安全隐患降到最低。

二、主要流程

这里直接把阿里云那边的介绍搬过来了。

三、注意事项

• 后端部分最需要注意的就是 callback 部分，其实也算是自己写法的问题。OSS 这边要求返回的变量是带有 ${xxx} 这样的字符串，而用了模板字符串语法时候，就有冲突了，这里需要转义一下。并且还需要把模板字符串中的换行空格去除掉，最终代码如下：

  const callbackBody = `{
    "filename":\${object},
    "size":\${size},
    "width":\${imageInfo.width},
    "height":\${imageInfo.height}},
    "format":\${imageInfo.format},
    "mimeType":\${mimeType}
  }`.replace(/ *[\r|\n] */gm, '');

• 前端部分用的是 Ant Design 的 Upload 组件，结合 Form 表单组件后，需要这么写设置初始值并获取图片值：

    <FormItem label="图片">
      {getFieldDecorator('imgs', {
        initialValue: fileList,
        valuePropName: 'fileList',
        getValueFromEvent: getUploadFileUrls,
      })(<Upload />)}
    </FormItem>

  getValueFromEvent: 可以把 onChange 的参数（如 event）转化为控件的值，具体看这里说明 getFileDecorator 的 option 配置

四、其他

了解到使用 ECS 实例通过 OSS 内网地址访问 OSS 资源时，是不收取流量费用的，查看说明。这里的方案自然就是使用 Nginx 做一次反向代理。配置参考