vue + element-ui + 阿里云oss服务端签名后直传实践

vue + element-ui + 阿里云oss服务端签名后直传实践

======================================================================================================

采用JavaScript客户端直接签名（参见JavaScript客户端签名直传）时，AccessKey ID和AcessKey Secret会暴露在前端页面，因此存在严重的安全隐患。因此，OSS提供了服务端签名后直传的方案。

服务端签名后直传的流程如图所示

以element-ui组件为例，上传前BeforeUpload先调用后端的policy接口获取签名信息，然后带着签名等信息和图片直接上传到aliyun的OSS。

封装上传子组件

<el-upload

action=“http://colablog.oss-cn-shenzhen.aliyuncs.com”

:data=“dataObj”

list-type=“picture”

:multiple=“false”

:show-file-list=“showFileList”

:file-list=“fileList”

:before-upload=“beforeUpload”

:on-remove=“handleRemove”

:on-success=“handleUploadSuccess”

:on-preview=“handlePreview”

点击上传

只能上传jpg/png文件，且不超过10MB