vue+element-ui+阿里云oss服务端签名后直传图片的示例 vue+element-ui+阿里云oss服务端签

最近开发项目过程中需要有一些图片上传的功能，本想用普通的上传方式，即后台提供上传的地址，前端直接调用的方法，但此方法有一点缺点，用户数据需先上传到应用服务器，之后再上传到OSS。网络传输时间比直传到OSS多一倍。如果用户数据不通过应用服务器中转，而是直传到OSS，速度将大大提升。为了提高上传效率，决定使用服务端签名后直传的方法来实现。
服务端签名后直传的原理如下：

用户发送上传Policy请求到应用服务器。
应用服务器返回上传Policy和签名给用户。
用户直接上传数据到OSS
阿里云服务端签名后直传官方示例

【vue+element-ui+阿里云oss服务端签名后直传图片的示例】但讲真，阿里云的开发文档写的并不是特别好理解，而且demo是用Plupload组件原生JS实现的，加入到vue项目中还需进行进一步封装，于是用elementui中的上传组件封装实现了服务端签名直传，示例如下：

.oss-upload .el-upload { border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; width: 60px; height: 60px; } .oss-upload .el-upload:hover { border-color: #409eff; } .uploader-icon { font-size: 18px; color: #8c939d; width: 60px; height: 60px; line-height: 60px; text-align: center; } .oss-upload-img { width: 60px; height: 60px; display: block; }